mozilla

Revision 269240 of Imágenes, tablas y huecos misteriosos

  • Enlace amigable (slug) de la revisión: Imágenes,_tablas_y_huecos_misteriosos
  • Título de la revisión: Imágenes, tablas y huecos misteriosos
  • Id de la revisión: 269240
  • Creada:
  • Creador: Jorolo
  • ¿Es la revisión actual? No
  • Comentario mejoro el texto, o eso espero.

Contenido de la revisión

No importa cuando hayas empezado a crear páginas web, es muy probable que tengas uno o más diseños basados en el clásico paradigma de "Tablas complicadas y muchas imágenes". Puede que hayas cortado algún logo para que encajara bien en el diseño, o usado un montón GIFs de un pixel para crear espacios, los principios y peligros son los mismos. En el pasado, esta forma de maquetar funcionaba porque los navegadores creaban las celdas tan altas y anchas como la imagen que contenían.

A partir del auge de los navegadores que muestran las páginas usando HTML y CSS "estandar" en vez de sus propios algoritmos de diseño. A causa a un detalle poco conocido de la especificación CSS, todo diseño basado en maquetación con tablas e imágenes espaciadoras se ha convertido en un desastre visual esperando ser visitado. Todo lo que necesitas es un navegador moderno, un DOCTYPE apropiado, y... ¡Boom!

Los componentes

Veamos más de cerca la reproducción del problema, y el porqué del mismo. Empezaremos con un ejemplo sencillo, ilustrado en la Figura 1: una celda de una tabla que contiene una imagen.

Figura 1

Evidentemente la mayoría de los diseños son más complicados que este, pero no necesitamos más para lo que nos proponemos. Una imagen y una celda, es todo lo que necesitamos. Aparentemente no hay nada incorrecto en ese ejemplo. Y no debería haberlo, ya que es un ejemplo de cómo los navegadores se comportaban tradicionalmente.

Veamos ahora cómo esa misma tabla es mostrada en un navegador moderno cuando la página tiene un DOCTYPE estricto.

Figura 2

Observa el espacio debajo de la imagen en la Figura 2. El diseño de ambas tablas y celdas es el mismo, es el modo de renderizado el que ha cambiado. La celda en vez de ajustarse a las dimensiones de la imagen, ahora envuelve también la línea en la que reposa la imagen. La imagen reposa en una línea porque las imágenes son, por defecto, elementos en línea. Eso es lo que pasa.

Como se construye una línea

Para entender que ha sucedido, veamos la construcción de una línea, el emplazamiento de las imágenes dentro de una línea, y el emplazamiento de una línea en una celda de una tabla. Primero veamos una línea básica que contiene texto, como se ve en la Figura 3.

Figura 3

La parte mas importante de la Figura 3 es la línea base (representada con una linea azul), y su emplazamiento dentro de la línea. El emplazamiento exacto de la línea base depende de la fuente por "defecto" de la línea (representada por el cuadro rojo), la fuente está determinada por el valor de font-family del elemento que contiene la línea. El autor no puede cambiar la línea base directamente, por eso donde quiera que esté, ahí se queda. El espacio debajo de la linea base se llama "espacio de descenso" ya que es hasta donde desciende el trazo inferior de letras como "j", "y", o "q". La Figura 4 nos muestra que pasa cuando añadimos una imagen a la composición.

Figura 4

Observa donde reposa por defecto la imagen: su parte inferior esta alineada con la linea base del espacio de linea. Este emplazamiento puede cambiarse con vertical-align, hablaremos de esto en breve, pero casi nadie cambia su valor por defecto. Quitemos el texto, y dejemos solo la imagen, como hemos hecho en la Figura 5.

Figura 5

Tenemos una imagen reposando en la línea base de la línea que contiene la imagen. Veamos que ocurre cuando ponemos esa línea en la celda de una tabla. (Figura 6).

Figura 6

Aquí lo tienes, espacios abiertos donde nunca se han visto antes. Es incluso peor con imágenes pequeñas, como las que tienen un pixel de altas, como la que se muestra en la Figura 7.

Figura 7

Ahora sobra espacio por todos lados. Suficiente para volver loco a cualquiera.

¿Qué tal si lo arreglamos?

Hay una solución evidente, dejar de crear diseños que dependan de tablas e imágenes espaciadoras o recortadas. Pero para muchos diseñadores esto no es práctico, y seguro que no ayudará a arreglar diseños viejos, que de repente se ven mal en los navegadores actuales. Hay otra solución, asegurarte de que tu documento no activa el modo de interpretación "estándar".

Puedes hacerlo usando un DOCTYPE que active el modo quirks o el modo "casi estándar", o no poniendo ningún DOCTYPE. No usar DOCTYPE te impedirá validar tu código, así que no es recomendable. Para autores que estén trabajando con documentos heredados, el modo "quirks" es la mejor opción. En los casos en los que el autor esté escribiendo documentos nuevos o intentando migrar un diseño para que hacerlo tan estándar como sea posible, entonces el modo "casi estándar" será probablemente la mejor elección.

Por supuesto, los documentos creados en XHTML estricto o HTML estricto usarán el modo de renderizado "estándar", por lo que tenemos dos caminos para solventar el problema en los documentos estrictos, y varias maneras de llamar esos "arreglos."

Imágenes en bloque

La primera opción, que funcionará para la mayoría de los diseños con mucho gráfismo, es el convertir la imagen que esta inicialmente en línea, en un elemento en bloque. Haz eso, y no se generará nunca más una caja en línea, y así el problema queda resuelto, esto asumiendo que esa imagen es la única cosa que está en esa celda. En los casos simples, añadiremos un estilo como este:

 td img {display: block;}

Considera esta regla cuando la aplicamos al siguiente código:

<table cellspacing="0" cellpadding="0" border="0" width="500">
<tr> <td> <img src="boton1.gif"> <img src="boton2.gif"> <img src="boton3.gif">
          <img src="boton4.gif"> <img src="boton5.gif"> </td> </tr>
<tr> <td style="background: red;">
          <img src="puntorojo.gif" height="1" width="1"> </td> </tr>
<tr> <td>
        <p style="margin: 0.5em;">Este texto esta en otra celda de la tabla. 
         Dentro del texto hay un icono <img src="icon2.gif">
         que indica que el enlace apunta a otra página.  Es muy astuto. </p> </td> </tr> 
</table>

Como podemos ver en la Figura 8, eso funciona bien en algunos casos pero no tanto en otros.

Figura 8

La línea roja muestra que el GIF espaciador de un pixel esta haciendo ahora que la celda tenga un pixel de alto, como el diseñador pretendía. Desafortunadamente, ahora los botones de la celda están todos en bloque, y por eso aparecen uno debajo del otro, en vez de mostrarse uno al lado del otro.

Una solución es añadir una clase a cualquier imagen que necesite estar en bloque y después escribir la regla que se adapte.

td img.enbloque {display: block;}

<td><img src="reddot.gif" class="enbloque"></td>

Dependiendo del diseño, puede que tengamos que añadir muchas clases para conseguir este simple efecto. Aún más si hay varias celdas de un pixel que se espere que creen tacked lines, o algo parecido. Si tienes un código de este tipo, puedes aplicar la clase en las filas de la tabla en vez de en las imágenes. Para lo que tendrás:

  tr.enbloque img {display: block;}

...así como el siguiente cambio en el código html:

<tr class="enbloque"><td style="background: red;">
<img src="puntorojo.gif" height="1" width="1">
</td></tr>

El resultado es que solo el GIF espaciador está en bloque, así dejamos las otras imágenes tranquilas. Esto nos lleva al resultado que se ve en la Figura 9.

Figura 9

Como alternativa, puedes poner la clase a las celdas en vez de a las filas, si es mejor opción para tí. En cualquiera de los casos, poner las imágenes en bloque puede llevarnos a efectos indeseados si las celdas de tus tablas contienen más de una imagen, como en la Figura 8.

Por supuesto, aunque tenemos un espaciador de celda de un pixel en la Figura 9, hay un espacio indeseado justo debajo de los botones de navegación de la parte superior. Deshacerse de este espacio es tan fácil como poner cada imagen en su propia celda y hacer que todas estén en bloque, pero dejémoslas todas juntas en una única celda y así podremos ilustrar otro ejemplo.

Usando la alineación vertical

Otra elección habitual es dejar la imagen en línea y modificar el alineamiento vertical de la imagen con respecto a la caja de la línea. Por ejemplo, puedes probar lo siguiente:

td img {vertical-align: bottom;}

Esto hará que el borde inferior de las imágenes se alinee con la parte inferior de la caja de la línea, en vez de con la línea base. Como podemos ver en el la Figura 10, tiene el efecto deseado: el espacio debajo de las imágenes de la barra de navegación ha desaparecido. Sin embargo, la celda decorativa es aún demasiado alta, y otras imágenes esta desalineadas respecto del texto de circundante.

Figura 10

De nuevo, podemos ponerle clases a las imágenes, celdas o filas, para reducir el efecto del problema. Sin embargo, los estilos que se muestran arriba no solucionarán el problema de las imágenes de un pixel, porque la caja en línea que la contiene tendrá la altura que tenga el tamaño de la fuente, y por ello no nos lo reducirá. La imagen se moverá a la parte inferior de la celda, pero la celda no se ajustará a la imagen. Además, cualquier otra imagen que sea más pequeña que la altura de la caja de la línea tendrá espacio alrededor, como pasaba con la celda espaciadora roja. La imagen de un pixel en la celda se alineará con la parte inferior de la misma, pero la caja en línea ha vuelto y con el tamaño del texto normal.

Mira, por ejemplo, la Figura 11, donde el tamaño de la fuente del documento es bastante amplia. Las imágenes de la barra de navegación tienen ahora un espacio encima de ellas, y el espaciador rojo ahora es incluso más grande.

Figura 11

Es difícil evitar esto, ya que las imágenes aún están en línea y por eso participan en la creación de la caja en línea. Si esa caja en linea se hace lo suficientemente alta, un espacio aparecerá rodeando las imágenes.

Esperando una solución

Gracias a la minuciosa implementación de CSS 2 por parte de Mozilla, el problema de las imágenes en línea dentro de celdas que crean espacios indeseados ha llamado la atención del grupo de trabajo de CSS. Se han planteado varias propuestas para solucionar el problema, una de las más prometedoras es la propiedad line-box-contain, que ha sido propuesta para su inclusión en CSS 3. Cuando esta propiedad sea adoptada, cualquier navegador que la soporte podrá emular el comportamiento tradicional de "reducción" sin modificar otros diseños con la siguiente regla:

td {line-box-contain: font replaced;}  /* propuesto para CSS3 */

Hay otros posibles arreglos dentro del plan actual de trabajo de CSS3, como la line-height-policy. Evidentemente, cuanto antes se encuentre e implemente una solución, antes se complacerá a todos los autores.

Recomendaciones

Sin soporte para CSS3, es difícil facilitar una serie de pasos a seguir para solucionar todas las variantes de este problema, ya que la mejor solución para un documento dado dependerá en gran medida de su estructura. Si tu documento usa un marcado transitional, asegúrate de que tu DOCTYPE refleja ese hecho y no activa el modo "estándar". Esto evitará que los navegadores usen el renderizado estándar, y de esta manera se evitan todos los problemas de diseño en las imágenes. Si estas usando HTML estricto, o necesitas por otros motivos el renderizado "estandar", entonces recuerda esto:

  • Cualquier imagen sola en una celda de una tabla (e.j., imágenes espaciadoras de un pixel) deben tener un display: block;.
  • Cualquier imagen que comparta celda con otras imágenes debe ser alineada verticalmente con la parte inferior de la linea.
  • Cualquier imagen que comparta celda con otras imágenes y texto debe tener su alineación vertical modificada, si fuese necesario.

Con una mezcla de propuestas y trucos para reducir las imágenes de un pixel los cuales, -en una navegador que soporte CSS, son innecesarios- es posible evitar estos efectos extraños del soporte de los estándares. La mejor solución podría ser asegurarse que las imágenes están siempre en una celda ellas solas, esto permite a los autores ponerlas en bloque, pero como siempre esto dependerá del diseño del autor.

Enlaces relacionados

no tengo clara esta sección <div class="originaldocinfo"> == Información original del documento == * Autor(es): Eric A. Meyer * Fecha de actualización: March 21st, 2003 * Copyright &copy; 2001-2003 Netscape. </div>

{{ wiki.languages( { "en": "en/Images,_Tables,_and_Mysterious_Gaps", "pl": "pl/Obrazki,_tabele_i_tajemnicze_dziury" } ) }}

Fuente de la revisión

<p>
</p><p>No importa cuando hayas empezado a crear páginas web, es muy probable que tengas uno o más diseños basados en el clásico paradigma de "Tablas complicadas y muchas imágenes". Puede que hayas cortado algún logo para que encajara bien en el diseño, o usado un montón GIFs de un pixel para crear espacios, los principios y peligros son los mismos. En el pasado, esta forma de maquetar funcionaba porque los navegadores creaban las celdas tan altas y anchas como la imagen que contenían.
</p><p>A partir del auge de los navegadores que muestran las páginas usando HTML y CSS "estandar" en vez de sus propios algoritmos de diseño. A causa a un detalle poco conocido de la especificación CSS, todo diseño basado en maquetación con tablas e imágenes espaciadoras se ha convertido en un desastre visual esperando ser visitado. Todo lo que necesitas es un navegador moderno, un DOCTYPE apropiado, y... ¡Boom!
</p>
<h3 name="Los_componentes"> Los componentes </h3>
<p>Veamos más de cerca la reproducción del problema, y el porqué del mismo. Empezaremos con un ejemplo sencillo, ilustrado en la Figura 1: una celda de una tabla que contiene una imagen.
</p><p><img align="none" alt="Figura 1" src="File:es/Media_Gallery/Images-tables-gaps-figure1.gif">
</p><p>Evidentemente la mayoría de los diseños son más complicados que este, pero no necesitamos más para lo que nos proponemos. Una imagen y una celda, es todo lo que necesitamos. Aparentemente no hay nada incorrecto en ese ejemplo. Y no debería haberlo, ya que es un ejemplo de cómo los navegadores se comportaban tradicionalmente.
</p><p>Veamos ahora cómo esa misma tabla es mostrada en un navegador moderno cuando la página tiene un DOCTYPE estricto.
</p><p><img align="none" alt="Figura 2" src="File:es/Media_Gallery/Images-tables-gaps-figure2.gif">
</p><p>Observa el espacio debajo de la imagen en la Figura 2. El diseño de ambas tablas y celdas es el mismo, es el modo de renderizado el que ha cambiado. La celda en vez de ajustarse a las dimensiones de la imagen,  ahora envuelve también la línea en la que reposa la imagen. La imagen reposa en una línea porque las imágenes son, por defecto, elementos en línea. Eso es lo que pasa.
</p>
<h3 name="Como_se_construye_una_l.C3.ADnea"> Como se construye una línea </h3>
<p>Para entender que ha sucedido, veamos la construcción de una línea, el emplazamiento de las imágenes dentro de una línea, y el emplazamiento de una línea en una celda de una tabla. Primero veamos una línea básica que contiene texto, como se ve en la Figura 3.
</p><p><img align="none" alt="Figura 3" src="File:es/Media_Gallery/Images-tables-gaps-figure3.gif">
</p><p>La parte mas importante de la Figura 3 es la línea base (representada con una linea azul), y su emplazamiento dentro de la línea. El emplazamiento exacto de la línea base depende de la fuente por "defecto" de la línea (representada por el cuadro rojo), la fuente está determinada por el valor de font-family del elemento que contiene la línea. El autor no puede cambiar la línea base directamente, por eso donde quiera que esté, ahí se queda. El espacio debajo de la linea base se llama "espacio de descenso" ya que es hasta donde desciende el trazo inferior de letras como "j", "y", o "q". La Figura 4 nos muestra que pasa cuando añadimos una imagen a la composición.
</p><p><img align="none" alt="Figura 4" src="File:es/Media_Gallery/Images-tables-gaps-figure4.gif">
</p><p>Observa donde reposa por defecto la imagen: su parte inferior esta alineada con la linea base del espacio de linea. Este emplazamiento puede cambiarse con <code>vertical-align</code>, hablaremos de esto en breve, pero casi nadie cambia su valor por defecto. Quitemos el texto, y dejemos solo la imagen, como hemos hecho en la Figura 5.
</p><p><img align="none" alt="Figura 5" src="File:es/Media_Gallery/Images-tables-gaps-figure5.gif">
</p><p>Tenemos una imagen reposando en la línea base de la línea que contiene la imagen. Veamos que ocurre cuando ponemos esa línea en la celda de una tabla. (Figura 6).
</p><p><img align="none" alt="Figura 6" src="File:es/Media_Gallery/Images-tables-gaps-figure6.gif">
</p><p>Aquí lo tienes, espacios abiertos donde nunca se han visto antes. Es incluso peor con imágenes pequeñas, como las que tienen un pixel de altas, como la que se muestra en la Figura 7.
</p><p><img align="none" alt="Figura 7" src="File:es/Media_Gallery/Images-tables-gaps-figure7.gif">
</p><p>Ahora sobra espacio por todos lados. Suficiente para volver loco a cualquiera.
</p>
<h3 name=".C2.BFQu.C3.A9_tal_si_lo_arreglamos.3F"> ¿Qué tal si lo arreglamos? </h3>
<p>Hay una solución evidente, dejar de crear diseños que dependan de tablas e imágenes espaciadoras o recortadas. Pero para muchos diseñadores esto no es práctico, y seguro que no ayudará a arreglar diseños viejos, que de repente se ven mal en los navegadores actuales. Hay otra solución, asegurarte de que tu documento no activa el modo de interpretación "estándar".
</p><p>Puedes hacerlo usando un DOCTYPE que active el <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/">modo quirks</a> o el <a href="es/Modo_casi_estandar_de_Gecko">modo "casi estándar"</a>, o no poniendo ningún DOCTYPE. No usar DOCTYPE te impedirá validar tu código, así que no es recomendable. Para autores que estén trabajando con documentos heredados, el modo "quirks" es la mejor opción. En los casos en los que el autor esté escribiendo documentos nuevos o intentando migrar un diseño para que hacerlo tan estándar como sea posible, entonces el modo "casi estándar" será probablemente la mejor elección.
</p><p>Por supuesto, los documentos creados en XHTML estricto o HTML estricto usarán el modo de renderizado "estándar", por lo que tenemos dos caminos para solventar el problema en los documentos estrictos, y varias maneras de llamar esos "arreglos."
</p>
<h4 name="Im.C3.A1genes_en_bloque"> Imágenes en bloque </h4>
<p>La primera opción, que funcionará para la mayoría de los diseños con mucho gráfismo, es el convertir la imagen que esta inicialmente en línea, en un elemento en bloque. Haz eso, y no se generará nunca más una caja en línea, y así el problema queda resuelto, esto asumiendo que esa imagen es la única cosa que está en esa celda. En los casos simples, añadiremos un estilo como este:
</p>
<pre> td img {display: block;}</pre>
<p>Considera esta regla cuando la aplicamos al siguiente código:
</p>
<pre>&lt;table cellspacing="0" cellpadding="0" border="0" width="500"&gt;
&lt;tr&gt; &lt;td&gt; &lt;img src="boton1.gif"&gt; &lt;img src="boton2.gif"&gt; &lt;img src="boton3.gif"&gt;
          &lt;img src="boton4.gif"&gt; &lt;img src="boton5.gif"&gt; &lt;/td&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;td style="background: red;"&gt;
          &lt;img src="puntorojo.gif" height="1" width="1"&gt; &lt;/td&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;
        &lt;p style="margin: 0.5em;"&gt;Este texto esta en otra celda de la tabla. 
         Dentro del texto hay un icono &lt;img src="icon2.gif"&gt;
         que indica que el enlace apunta a otra página.  Es muy astuto. &lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; 
&lt;/table&gt;
</pre>
<p>Como podemos ver en la Figura 8, eso funciona bien en algunos casos pero no tanto en otros.
</p><p><img align="none" alt="Figura 8" src="File:es/Media_Gallery/Images-tables-gaps-figure8.gif">
</p><p>La línea roja muestra que el GIF espaciador de un pixel esta haciendo ahora que la celda tenga un pixel de alto, como el diseñador pretendía. Desafortunadamente, ahora los botones de la celda están todos en bloque, y por eso aparecen uno debajo del otro, en vez de mostrarse uno al lado del otro.
</p><p>Una solución es añadir una clase a cualquier imagen que necesite estar en bloque y después escribir la regla que se adapte.
</p>
<pre>td img.enbloque {display: block;}

&lt;td&gt;&lt;img src="reddot.gif" class="enbloque"&gt;&lt;/td&gt;</pre>
<p>Dependiendo del diseño, puede que tengamos que añadir muchas clases para conseguir este simple efecto. Aún más si hay varias celdas de un pixel que se espere que creen tacked lines, o algo parecido. Si tienes un código de este tipo, puedes aplicar la clase en las filas de la tabla en vez de en las imágenes. Para lo que tendrás:
</p>
<pre>  tr.enbloque img {display: block;}
</pre>
<p>...así como el siguiente cambio en el código html:
</p>
<pre>&lt;tr class="enbloque"&gt;&lt;td style="background: red;"&gt;
&lt;img src="puntorojo.gif" height="1" width="1"&gt;
&lt;/td&gt;&lt;/tr&gt;</pre>
<p>El resultado es que solo el GIF espaciador está en bloque, así dejamos las otras imágenes tranquilas. Esto nos lleva al resultado que se ve en la Figura 9.
</p><p><img align="none" alt="Figura 9" src="File:es/Media_Gallery/Images-tables-gaps-figure9.gif">
</p><p>Como alternativa, puedes poner la clase a las celdas en vez de a las filas, si es mejor opción para tí. En cualquiera de los casos, poner las imágenes en bloque puede llevarnos a efectos indeseados si las celdas de tus tablas contienen más de una imagen, como en la Figura 8.
</p><p>Por supuesto, aunque tenemos un espaciador de celda de un pixel en la Figura 9, hay un espacio indeseado justo debajo de los botones de navegación de la parte superior. Deshacerse de este espacio es tan fácil como poner cada imagen en su propia celda y hacer que todas estén en bloque, pero dejémoslas todas juntas en una única celda y así podremos ilustrar otro ejemplo.
</p>
<h4 name="Usando_la_alineaci.C3.B3n_vertical"> Usando la alineación vertical </h4>
<p>Otra elección habitual es dejar la imagen en línea y modificar el alineamiento vertical de la imagen con respecto a la caja de la línea. Por ejemplo, puedes probar lo siguiente:
</p>
<pre>td img {vertical-align: bottom;}</pre>
<p>Esto hará que el borde inferior de las imágenes se alinee con la parte inferior de la caja de la línea, en vez de con la línea base. Como podemos ver en el la Figura 10, tiene el efecto deseado: el espacio debajo de las imágenes de la barra de navegación ha desaparecido. Sin embargo, la celda decorativa es aún demasiado alta, y otras imágenes esta desalineadas respecto del texto de circundante.
</p><p><img align="none" alt="Figura 10" src="File:es/Media_Gallery/Images-tables-gaps-figure10.gif">
</p><p>De nuevo, podemos ponerle clases a las imágenes, celdas o filas, para reducir el efecto del problema. Sin embargo, los estilos que se muestran arriba no solucionarán el problema de las imágenes de un pixel, porque la caja en línea que la contiene tendrá la altura que tenga el tamaño de la fuente, y por ello no nos lo reducirá. La imagen se moverá a la parte inferior de la celda, pero la celda no se ajustará a la imagen. Además, cualquier otra imagen que sea más pequeña que la altura de la caja de la línea tendrá espacio alrededor, como pasaba con la celda espaciadora roja. La imagen de un pixel en la celda se alineará con la parte inferior de la misma, pero la caja en línea ha vuelto y con el tamaño del texto normal.
</p><p>Mira, por ejemplo, la Figura 11, donde el tamaño de la fuente del documento es bastante amplia. Las imágenes de la barra de navegación tienen ahora un espacio encima de ellas, y el espaciador rojo ahora es incluso más grande.
</p><p><img align="none" alt="Figura 11" src="File:es/Media_Gallery/Images-tables-gaps-figure11.gif">
</p><p>Es difícil evitar esto, ya que las imágenes aún están en línea y por eso participan en la creación de la caja en línea. Si esa caja en linea se hace lo suficientemente alta, un espacio aparecerá rodeando las imágenes.
</p>
<h3 name="Esperando_una_soluci.C3.B3n"> Esperando una solución </h3>
<p>Gracias a la minuciosa implementación de CSS 2 por parte de Mozilla, el problema de las imágenes en línea dentro de celdas que crean espacios indeseados ha llamado la atención del grupo de trabajo de CSS. Se han planteado varias propuestas para solucionar el problema, una de las más prometedoras es la propiedad <a class="external" href="http://www.w3.org/TR/css3-box/#line-box-contain">line-box-contain</a>, que ha sido propuesta para su inclusión en CSS 3. Cuando esta propiedad sea adoptada, cualquier navegador que la soporte podrá emular el comportamiento tradicional de "reducción" sin modificar otros diseños con la siguiente regla:
</p>
<pre>td {line-box-contain: font replaced;}  /* propuesto para CSS3 */</pre>
<p>Hay otros posibles arreglos dentro del plan actual de trabajo de CSS3, como la <a class="external" href="http://www.w3.org/TR/css3-box/#line-height">line-height-policy</a>. Evidentemente, cuanto antes se encuentre e implemente una solución, antes se complacerá a todos los autores.
</p>
<h3 name="Recomendaciones"> Recomendaciones </h3>
<p>Sin soporte para CSS3, es difícil facilitar una serie de pasos a seguir para solucionar todas las variantes de este problema, ya que la mejor solución para un documento dado dependerá en gran medida de su estructura. Si tu documento usa un marcado transitional, asegúrate de que tu DOCTYPE refleja ese hecho y no activa el modo "estándar". Esto evitará que los navegadores usen el renderizado estándar, y de esta manera se evitan todos los problemas de diseño en las imágenes. Si estas usando HTML estricto, o necesitas por otros motivos el renderizado "estandar", entonces recuerda esto:
</p>
<ul><li> Cualquier imagen sola en una celda de una tabla (e.j., imágenes espaciadoras de un pixel) deben tener un display: block;.
</li><li> Cualquier imagen que comparta celda con otras imágenes debe ser alineada verticalmente con la parte inferior de la linea.
</li><li> Cualquier imagen que comparta celda con otras imágenes y texto debe tener su alineación vertical modificada, si fuese necesario.
</li></ul>
<p>Con una mezcla de propuestas y trucos para reducir las imágenes de un pixel los cuales, -en una navegador que soporte CSS, son innecesarios- es posible evitar estos efectos extraños del soporte de los estándares. La mejor solución podría ser asegurarse que las imágenes están siempre en una celda ellas solas, esto permite a los autores ponerlas en bloque, pero como siempre esto dependerá del diseño del autor.
</p>
<h3 name="Enlaces_relacionados"> Enlaces relacionados </h3>
<ul><li> <a href="es/Modo_casi_estandar_de_Gecko">El modo casi estándar de Gecko</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/">Modo quirks de Mozilla</a>
</li></ul>
<p><span class="comment">no tengo clara esta sección &lt;div class="originaldocinfo"&gt;  == Información original del documento == * Autor(es): Eric A. Meyer * Fecha de actualización: March 21st, 2003 * Copyright &amp;copy; 2001-2003 Netscape. &lt;/div&gt;</span>
</p>{{ wiki.languages( { "en": "en/Images,_Tables,_and_Mysterious_Gaps", "pl": "pl/Obrazki,_tabele_i_tajemnicze_dziury" } ) }}
Revertir a esta revisión