box-shadow y 100% Fluid Width Número

Question

He estado puliendo una página que construí en el último día o dos y me he encontrado con un problema después de usar la sombra de cuadro. Esperaba que alguien arrojara algo de luz sobre una manera fácil de arreglar esto

La configuración: Tengo un div que tiene algunas propiedades, incluyendo ancho, ancho máximo y sombreado.

#mydiv { 
     width:100%; 
     max-width:1200px; 
     -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
} 

El problema: La propiedad "box-shadow", añade 40px a la anchura del elemento div - 20px a cada lado. Cuando una pantalla es lo suficientemente pequeña como para que el contenido llegue al atributo de ancho del 100%, vemos una barra de desplazamiento horizontal. Después de excavar a través del CSS, descubrí que era porque el div era algo más parecido al ancho: 100% + 40px;

lo que he intentado: he considerado el establecimiento de overflow: hidden en el div padre, pero tiene un juego-min ancho que luego hacer el contenido inaccesible. También he intentado usar un porcentaje para el argumento de tamaño en el CSS de caja-sombra (1% por ejemplo) y luego establecer el ancho del div en 98%, pero el CSS de caja no parece aceptar un porcentaje para su tamaño. También he considerado usar javascript para probar el ancho del navegador y luego mostrar u ocultar el elemento de sombreado de caja en consecuencia, pero no parece ser la solución óptima.

Tiene que haber una manera más simple de manejar esto. ¿Pensamientos?

Answer 1

Es un error del navegador.

El spec solía ser claro sobre esto, pero redacción ya ha sido añadido para aclarar que las sombras no deben provocar el desplazamiento:

sombras no activan el desplazamiento o aumentar el tamaño del área desplazable.

Pero como consecuencia de esta omisión anterior, la mayoría de los navegadores hicieron gatillo de desplazamiento para las sombras. Esto ahora se ha solucionado en todos los navegadores recientes.

En los navegadores más antiguos, ya sea que usted tiene que vivir con las barras de desplazamiento, añadir a su overflow-x: hidden#mydiv y esperamos que no se rompe nada, o encontrar otra manera de añadir sombras (por ejemplo, utilizando el bueno de PNG).

consulta las siguientes dos preguntas relacionadas:

• Firefox & CSS3: using overflow: hidden and box-shadow
• CSS box shadow on container div causes scrollbars

Answer 2

Hay una solución alternativa al problema de las barras de desplazamiento en los sitios de ancho de fluidos con caja de sombra.

Si agrega una instrucción @media en su CSS, puede detectar cuándo la ventana del navegador tiene un ancho determinado (los navegadores modernos lo admiten y IE9 también).

Por ejemplo, para un div pagewrap centrado con un máximo de ancho ajustado a 940px, trate de añadir esto a su hoja de estilo: pantalla @media

y (min-width: 998px) { div # pagewrap { -moz-box-shadow: 3px 8px 26px # a1a09e; -webkit-box-shadow: 3px 8px 26px # a1a09e; box-shadow: 3px 8px 26px # a1a09e; }}

El ancho mínimo de 998px en @media css es hacer que la sombra desaparezca justo antes de que active la barra de desplazamiento.