Espacio vertical entre Imágenes en Firefox

December 17

Si el diseño de sus sitios web usando tablas, Firefox podría mostrar un espacio delgado debajo de sus imágenes. Si su sitio ha imágenes apiladas verticalmente, a continuación, este espacio se verá como un descanso entre las imágenes. Este efecto es el resultado de un error. Tiene varias opciones para tratar con él, incluyendo el uso de un tipo de documento diferente, haciendo que la pantalla de imágenes como bloques o jugando con su alineación vertical.

The History: Tablas y CSS

A finales de 1990, los sitios web a menudo utilizan las tablas para organizar su trazado. El uso de hojas de estilo en cascada (CSS) reemplazó esta técnica en el cambio de siglo, y desde entonces los navegadores han cambiado sus normas para dar cabida a CSS - a veces a expensas de las tablas. sitios web que una vez que muestran sus imágenes correctamente ahora muestran errores mays, como el espacio vertical indeseado por debajo de las imágenes Tabla de base.

La causa: misattributed alineación de línea base

El error-espacio vertical ocurre porque convenciones CSS lugar imágenes a lo largo de una línea de base textual, que es comparable a las líneas azules en una hoja de papel rayado. Al escribir sobre papel rayado, que escribir la mayor parte de la carta encima de la línea, pero algunas cartas - como "y" y "g" tiene descendentes que se sumergen debajo de ella. CSS se ajusta a la posible presencia de las letras con trazos bajos, incluso si sólo tiene una imagen en el bloque de la tabla.

Cambio doctypes: modo "casi estándar" de Firefox

Firefox solucionará este problema automáticamente cuando entra en "casi estándar" de modo. Para activar este modo, se necesita cambiar su tipo de documento a uno de los siguientes:

"- // W3C // DTD XHTML 1.0 Transitional // EN"
"- // W3C // DTD XHTML 1.0 // EN conjunto de marcos"
"- // W3C // DTD HTML 4.01 Transitional // EN"
"- // W3C // DTD HTML 4.01 Frameset // EN"

El tipo de documento pertenece en la parte superior de su código. Una declaración DOCTYPE completa puede leer, por ejemplo:

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN">

Tenga en cuenta que si utiliza HTML 4.01, también se tiene que declarar un identificador de sistema. En ese caso, una declaración completa se vería así:

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"
"Http://www.w3.org/TR/html4/loose.dtd">

Visualización de secuencia Fix

Por defecto, las imágenes dentro de una tabla se muestran en línea. Si cambia a mostrar como un bloque, a continuación, podrás remediar el problema. Puede hacer esto cambiando manualmente estilo de visualización de la imagen de este modo:

Si tiene varias imágenes, también se puede manejar esto en su archivo CSS añadiendo la siguiente:

img td {display: block;}

Con ese trozo de código, cada imagen en una tabla mostrará automáticamente como un bloque. Esto le puede ahorrar una cantidad considerable de tiempo.

Vertical Alignment-Fix

Considere la posibilidad de solucionar el problema mediante la alineación de la imagen con la parte inferior de su bloque de mesa. Puede hacer esto cambiando el estilo de visualización de la imagen individual de este modo:

Como alternativa, puede estilo del elemento añadiendo esta línea a su hoja de estilo.

img {td vertical-align: parte inferior;}

Tenga en cuenta que este método puede causar un comportamiento extraño. Después de usarlo, compruebe su sitio en todos los navegadores. Si no funciona, considere el uso de una de las otras soluciones.