soy Kseso y esto EsCSS

Firefox bug y las imágenes: efectos del atributo alt en su caja computada

Comportamiento extraño (¿bug?) de Firefox con las imágenes no cargadas y el tamaño de la caja computada en función del atributo ALT y su valor.

Firefox bug y las imágenes: efectos del atributo alt en su caja computada

·Por Kseso ✎ 5

Sí. El artículo de hoy va sobre Firefox y el efecto que tiene el atributo alt de las imágenes en la caja generada.

Creo que es un señor bug de Firefox estos efectos del atributo alt, además de ser de lo más curiosos y desconcertantes. Pues el tamaño de la caja generada por una imagen vacía (no cargada por el navegador) varía en función de que exista o no el atributo alt, de que se encuentre vacío o de que sea una cadena de texto.

Todo ello, como indico al inicio, en el navegador Firefox en su versión 33.1 corriendo en el SO Vista. En otros SOs y nose si se mantiene. En Chrome no he observado tales efectos. Firefox y las imágenes: efectos del atributo alt en su caja computada

Pongamos en situación: tengamos en el Html una imagen que no es cargada por el navegador (para ello lo que hago es indicar una ruta a una imagen inexistente): <img src='no.jpg' />. Observa que omito deliberadamente el atributo alt

A continuación definamos tamaños para dicha imagen y observemos qué ocurre con Firefox:

Nada raro. FIrefox genera una caja para la imagen con los valores indicados en el Css.

A continuación añadamos el atributo alt='' sin ningún valor en él. ¡Sorpresa!

Firefox ignora los tamaños (width & height declarados para la imagen. No importa que se añada el modificador !important. Tampoco surte efecto el añadir los valores en el atributo style en línea. Ni que el tamaño sea declarado en los atributos width & height en la propia imagen.

La siguiente prueba consiste en añadir una cadena de texto al valor del atributo alt.

El tamaño de la caja generada por Firefox para la imagen no cargada es la necesaria para mostrar todo el contenido del texto alternativo. Sigue ignorando los valores declarados para su anchura y altura. Y como por defecto el elemento img es un elemento de línea, el fondo y bordes (si están declarados) se muestra como en los elementos textuales de línea.

Soluciones

Display: block o inline-block

Modificar para la imagen no cargada (vacía) el valor de la propiedad display tanto a block o inline-block algo se corrige. Pero...

Firefox ahora sí que la caja generada por la imagen vacía (anchura y altura) son las indicadas en el Css o los atributos correspondientes. Pero...
Si el valor del texto contenido en el atributo alt es lo suficientemente extenso respetará el margen lateral de la caja de la imagen pero la desbordará por abajo mostrando el sobrante.

Overflow: hidden

Para mostrar la caja de la imagen no cargada con el tamaño declarado y sin que el contenido del texto alternativo la desborde es necesario declarar overflow: hidden;.

Si el valor es scroll fuerza la aparición de las barras de desplazamiento (scroll) del todo funcionales.

Todos estos casos los puedes ver en vivo en el siguiente pen

See the Pen Firefox, empty images & `alt´ attr by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Recuerda que estos efectos (¿bug?) yo los he podido ver en Firefox ver. 33.1 corriendo en Vista. En Chrome no. Si tienes ocasión de ver el pen anterior en otros navegadores, versiones y SO agradezco saber qué ocurre. Gracias.

avatar del Editor del blog

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 Don Kseso Kseso