CSS - ¿Error de Mozilla? caja-sombra: el recuadro no funciona correctamente

Básicamente, el código siguiente debe ser simplemente una página blanca con una sombra alrededor del borde. Esto funciona bien en Chrome, pero parece que no puedo hacerlo funcionar en Firefox.CSS - ¿Error de Mozilla? caja-sombra: el recuadro no funciona correctamente

<html> 
<head> 
<style type=text/css> 
body { 
background:#ffffff; 
font-family:arial; 
margin:auto; 
box-shadow:inset 0px 0px 100px #333333; 
-moz-box-shadow:inset 0px 0px 100px #333333; 
-webkit-box-shadow:inset 0px 0px 100px #333333; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Ver la página aquí:

http://pastehtml.com/view/bagevr6ke.html

vistazo en Chrome continuación Firefox, y dime si ves una diferencia:)

Saludos

EDIT: Entonces, la publicación a continuación explicaba cómo corregir el código anterior, funcionaba un restablecimiento de CSS y también aprendí sobre el modo quirk y los doctypes :)

Sin embargo, la página de CSS en la que estoy trabajando sigue sufriendo este error sin importar el reinicio que use. Actualmente no estoy usando un Doctype ya que no estoy seguro de lo que debería poner, o si se solucionaría el error.

Aquí es el sitio completo:

http://middle.dyndns-server.com/results.html

Y la hoja de estilo:

body { 
background:url('bg.png'); 
font-family:arial; 
margin:auto; 
box-shadow:inset 0px 0px 100px #333333; 
-moz-box-shadow: inset 0px 0px 100px #333333; 
-webkit-box-shadow:inset 0px 0px 100px #333333; 
} 

#footer { 
padding-bottom:10px; 
margin-top:30px; 
} 

#page { 
width:960px; 
height:auto; 

background-color:#ffffff; 
#background:url('bg2.png'); 

/*Space*/ 
padding-top:0px; 
padding-bottom:0px; 
padding-left:0px; 
padding-right:0px; 
margin-top:-10px; 
margin-bottom:0px; 
margin-left:auto; 
margin-right:auto; 

/*Shadow*/ 
-moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; 
-webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; 
box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; 

/*Border Radius*/ 
border-radius:0px 0px 20px 20px; 
-moz-border-radius:0px 0px 20px 20px; 
-webkit-border-radius:0px 0px 20px 20px; 
-o-border-radius:0px 0px 20px 20px; 

} 

input[type=text] { 
background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666)); 
     background: -moz-linear-gradient(top, #333333, #666666); 
     filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666'); 

border-width:1px; 
border-style:solid; 
border-color:#777777; 
color:ffffff; 
} 

.line1 { 
float:left; 
align:center; 
padding-bottom:0px; 
} 

hr { 
clear:left; 
color:#111111; 
} 

/* The *normal* state styling */ 
.btn{ 
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); 
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000'); 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')"; 
    background-color:rgb(51, 51, 51); 
    border:1px solid rgb(0, 0, 0); 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    padding:5px 10px; 
box-shadow:0px 0px 6px rgb(130, 130, 130); 
    -moz-box-shadow:0px 0px 6px rgb(130, 130, 130); 
    -webkit-box-shadow:0px 0px 6px rgb(130, 130, 130); 
    font-size:12px; 
    font-weight:normal; 
    color:rgb(255, 255, 255); 
    text-shadow:0px 0px 1px rgb(255, 255, 255); 
} 
/* The *hover* state styling */ 
.btn:hover{ 
    background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
    background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); 
    background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
    box-shadow:0px 0px 6px rgb(0, 0, 0); 
    -moz-box-shadow:0px 0px 6px rgb(0, 0, 0); 
    -webkit-box-shadow:0px 0px 6px rgb(0, 0, 0); 
} 

/* The *active* state styling */ 
.btn:active,.btn:focus{ 
    background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); 
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); 
} 

a { 
font-family:arial; 
outline:none; 
text-decoration:none; 
color:333333; 
} 

a:link { 
text-decoration:none; 
} 

a:visited { 
text-decoration:none; 
} 

a:active { 
text-decoration:none; 
color:ffffff; 
} 

a:hover { 
text-decoration:none; 
}

Estoy seguro de que no todo es grande, pero estoy aprendiendo y este tema es mi objetivo principal en este momento :)

Muchas gracias.

Fuente

2011-10-13 bag-man

Comparta el HTML completo de su página. – thirtydot

Añadir este:

html, body { 
    height: 100% 
}

http://jsbin.com/oyuzug

No hay nada en body, por lo que no tiene la altura.

La única razón por la que funcionó sin esto en Chrome es porque no incluyó un doctype como la primera línea para habilitar el Modo de estándares.

Prueba estos en Chrome:

Su código original: http://jsbin.com/urimah

Su código original con tipo de documento: http://jsbin.com/urimah/2

Conclusión: Siempre incluya un tipo de documento como la primera línea de evitar Quirks Mode y las inconsistencias que trae entre los diferentes navegadores.

Fuente

2011-10-13 14:33:40 thirtydot

Esto funciona para el ejemplo que he dado pero aún no soluciona mi problema principal (es mucho más complejo). Pensé que con un reinicio sería cómo se resolvió xD Muchas gracias –

De nada. No puedo ayudarte con tu "problema principal" a menos que lo expliques. – thirtydot

He actualizado el "OP", no estoy seguro de cómo los llames en StackOverflow (que me gusta mucho). ¡Gracias de nuevo! –

Firefox le muestra lo correcto porque en este momento body no tiene . Por lo tanto, debe definir el height de su body.

escribir esto en tu CSS:

html, body { 
    height: 100% 
}

Fuente

2011-10-13 14:35:02 sandeep

Así que la respuesta correcta marcado como CSS - Mozilla bug? box-shadow:inset not working properly no funciona para mí. ¿Por qué? Porque el ejemplo no incluye contenidoCuando el estilo de los elementos <body> y <html> con height: 100% crea un error extraño donde el 100% se registra técnicamente como 100% de la ventana gráfica en lugar de 100% de la altura de la ventana.

Este es un gran ejemplo de cómo hacerlo correctamente: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Diseñar los elementos body y html en height: 100% es correcto, sin embargo, su sombra interna debe estar unida a otro elemento (no puede ser body o html) y luego min-height: 100%, así como box-shadow: 0 0 100px #000 conectado a la cuña, p.

html, body { height: 100% } 
#styled-div { 
    min-height: 100%; 
    box-shadow: 0 0 100px #000; 
}

Fuente

2012-09-09 04:07:43 Brian

CSS - ¿Error de Mozilla? caja-sombra: el recuadro no funciona correctamente

Respuesta

Cuestiones relacionadas