opacidad de css que causa problemas de diseño en IE9

Me encontré con un problema muy interesante en IE9. Cuando se utiliza la propiedad filter: alpha (opacity =) o -ms-filter css en un div de envoltura, el modelo de recuadro de los elementos del bloque interno se corrompe. En otras palabras, el colapso del margen vertical se desactiva y el margen vertical se agrega en su lugar. Me estoy enfrentando a este problema solo en IE9. IE7/8 no se ve afectado.opacidad de css que causa problemas de diseño en IE9

Aquí hay un jsFiddle con el problema aislado. Use el anclaje del disparador para activar la clase que incluye filter: alpha en el div de envoltura. (IE9 solamente)

¿Alguna idea de por qué sucede esto?

Gracias de antemano

Fuente

2012-09-17 travisbotello

Cualquier filtro parece hacer esto (http://jsfiddle.net/7BFd7/). Pero, la propiedad CSS 'opacity' funciona en IE9 y no causa la falla. Por lo tanto, usar el filtro solo en un estilo '[si IE 9]' podría ser una solución alternativa. – Roman

Gracias por la respuesta rápida. Ya pensé en esto ya que estoy usando un modelo repetitivo en todos mis proyectos. Sin embargo, este comportamiento es realmente muy extraño ... – travisbotello

@Roman Probablemente sería bueno publicar eso como una respuesta para que pueda ser aceptado. – Shauna

Cualquier filtro parece hacer esto (jsfiddle.net/7BFd7).

Solo podría formular una hipótesis acerca de por qué lo hace. Parece que el uso de un filtro establece el elemento para usar una pantalla desconocida o un modo de posición que no hace colapso de margen (como posición absoluta, bloques en línea y elementos flotantes o borrados).

de todos modos .. Si solo quiere ocultar ese elemento, puede usar visibility: hidden, que tiene el mismo efecto que opacity: 0 y es compatible en todas partes.

Si desea animar la opacidad, tendrá que hacer olfateos en el navegador a través de comentarios condicionales o Normalizr y animar opacity en IE9 y aplicar el filtro en versiones anteriores de IE.

Fuente

2012-09-18 08:27:57 Roman

Una forma de "desarmar" el archivador en IE9 con sólo CSS al tiempo que permite que pueda aplicarse en IE8 y menor es el siguiente código que sólo tendría como objetivo IE9:

.css-selector { 
    filter:value; 
    opacity:value; 
} 
@media all and (min-width:0) { /* the min-width query hides below IE9 */ 
    .css-selector { 
     filter:none; 
    } 
}

De esta manera, se le entonces solo use opacity: value y no filtre en ese elemento en IE9.

Fuente

2014-04-01 23:14:40 squareman

opacidad de css que causa problemas de diseño en IE9

Respuesta

Cuestiones relacionadas