Bug IE8: max-width en imágenes las hace desaparecer 3.3.12

Bug IE8: max-width en imágenes las hace desaparecer

Lo que sigue es una traducción por libre, seguro que con errores, de la descripción que hace el autor de un bug en ie8 con las imágenes y la propiedad max-width
Nota que no siempre se presenta, sino que lo hace cuando concurren varias circunstancias.
Sigue leyendo para ver cuándo y en qué casos se produce.

Hace poco me encontré con un problema que era realmente difícil de entender. Estaba trabajando en un diseño responsable donde usé img {max-width: 100%;} para estar seguro de que las imágenes se reducían en vez de desbordar en estrechas ventanas.

Funcionó muy bien en todas partes ... hasta que fui a verlo en IE8. ¡El logo del sitio se había ido! Ninguna de las para IE funcionó de las que siempre soluccionan el problema, y me tomó mucho tiempo darmr cuenta de que max-width era parte del problema.

Después de un poco de ensayo y error se descubrió que si una imagen tiene un max-width especificado a través de CSS, un atributo de ancho en el código HTML, y es el hijo de un elemento flotante que no tiene ancho de caja explícito, IE8 hace que su ancho sea cero . No estoy seguro si este comportamiento es correcto, pero seguro que no parece intuitivo. Si esto sucediese con imágenes que no tienen un atributo de anchura sería algo más lógico para mí. Y parece que sólo ocurre en Internet Explorer 8 (y sólo en el modo estándar).

De todos modos, hay varias maneras de arreglar este fallo si desea que aparezca la imagen en IE8:

• Quite el atributo del elemento IMG de ancho a partir del marcado
• Dar el elemento flotante un ancho explícito
• Declarar a la imagen problemática width:auto o max-width:none

La mejor opción es, creo yo, especificar width:auto a las imágenes dentro de los elementos flotantes sin anchura explícita.

Compruebe la desaparición de la imagen en la página de demostración (debe haber tres logotipos). La primera no aparecerá en Internet Explorer 8, la segunda tiene width:auto y aparece en todas partes, al igual que la tercera, ya que no tiene las dimensiones especificadas en el marcado html.

Un misterioso error, con seguridad.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso