IE8 altura de la celda de la tabla de estiramiento

Tengo un diseño de página basado en tablas, y por mucho que me gustaría reestructurarlo con marcas más modernas, esa no es una opción. El diseño utiliza una celda que abarca dos filas como barra lateral en el lado derecho, mientras que la celda superior izquierda contiene un encabezado simple y la celda inferior izquierda contiene el contenido principal de la página. La celda superior izquierda tiene una altura fija, y la altura de la celda inferior y la celda derecha no se especifica. He creado un ejemplo simplificado que ilustra mi problema:IE8 altura de la celda de la tabla de estiramiento

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
.fixed { height: 100px; } 

table { border: 1px solid #000; } 
td { border: 1px solid #ddd; vertical-align: top; } 
tr { border: 1px solid #cfc; } 
* { padding: 15px; } 
</style> 
</head> 
<body> 

<table> 
<tr class="fixed"> 
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td> 
</tr> 

<tr class="stretch"> 
<td>left</td> 
</tr> 

<tr class="footer"> 
<td colspan="2">footer</td> 
</tr> 

</table> 

</body> 
</html>

yo he dado la altura de la columna de la derecha en línea a 500 píxeles para simular contenido que es más alto que la altura de las dos columnas de la izquierda. Esto se comporta como se esperaba en los navegadores modernos: la altura de la celda superior izquierda permanece fija, y la celda inferior se estira para llenar el espacio adicional. Pero en IE8, ambas celdas izquierdas se estiran verticalmente. Necesito la celda superior para mantener su altura fija. ¿Cómo logro que IE8 respete la altura especificada para la celda superior izquierda usando solo CSS?

Editar: En lugar de establecer la altura en la columna derecha td, estoy estableciendo la altura en un div dentro de la columna de la derecha.

Fuente

2011-05-13 undefined

Creo que Jeroen tiene razón en que no hay soluciones de CSS puro para este problema. Cada vez que haya celdas en una tabla con el rowspan configurado, IE ignorará las alturas explícitas establecidas en esas filas. La solución es nunca usar rowspan. En mi situación, pude eludir el problema colocando el contenido que abarcaba dos filas en la segunda fila, dejando la celda en la primera fila vacía y usando un margen negativo para mover el inicio del contenido a la primera fila . Espero que esto sea útil para otra persona. Si alguien tiene una solución pura de CSS, la aceptaré como respuesta.

Fuente

2011-05-17 15:13:50 undefined

Problema interesante. Miedo la respuesta puede ser que no hay soluciones reales al problema que describe, solo soluciones temporales. He encontrado que la adición de un poco de estilo a la segunda td "izquierda" hizo desaparecer el problema, al menos en su muestra:

<td style="min-height: 500px;">left</td>

Espero que ayude.

PS. IE9 tuvo el mismo problema.

Fuente

2011-05-14 12:27:52 Jeroen

Esto no es realmente una opción ya que la altura de la columna de la derecha no es realmente fija o conocida cuando se dibuja la página. – undefined

Entiendo. Sin embargo, me temo que mi respuesta sigue siendo la única respuesta: solo soluciones alternativas como la que brindé pueden ser útiles, de lo contrario tendrás que recurrir a JavaScript o a un diseño completamente nuevo. – Jeroen

Incluso si una celda solo contiene una imagen, debe saber que las celdas de la tabla tienen su altura calculada de acuerdo con la posición del texto línea de base; y el estilo de texto actual tiene un impacto en el cálculo de esta posición de referencia y el espaciado de línea después de ella. Puede pensar que establecer "altura de línea: 1" sería suficiente para evitar este espacio de línea, es decir, el espacio de margen que siempre ocurre debajo de cada línea de texto. Esto no es suficiente. La solución más simple es establecer "línea-altura: 0,8" (o inferior) para la celda que contiene la imagen, de modo que la brecha de 0,2em por defecto debajo de la línea de base (que todavía se ingiere como predeterminada debido a la ausencia de texto) hará que la línea base se ajuste a la altura de la celda. A continuación, puede colocar correctamente una imagen (o cualquier elemento de altura fija) en la celda cuya altura determinará la altura de la celda, sin tener que estirar la altura de la celda.

Nota: con esta altura de línea, cualquier texto que coloque en esa celda tendrá su línea de base justo en la parte inferior de la celda, de modo que los descensores se superpongan al margen inferior, borde, espacio entre bordes de la celda actual , o en el borde, relleno o contenido de la celda en la siguiente fila, o contenido debajo de la tabla si la celda estaba en la última fila.

Probado en Google Chrome (versión actual 15)

Ejemplo (HTML5):

<!DOCTYPE html> 
<html><head> 
    <title>Examples of image transforms (rotations and mirroring)</title> 
    <style> 
    table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;} 
    td.z{line-height:0;} 
    </style> 
</head><body> 
    <table border="0" cellspacing="0" cellpadding="0"> 
    <tbody><tr> 
    <td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td> 
    <td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td> 
    <td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td> 
    <td style="border-bottom:hidden">Normal &minus;90° (0,1,-1,0,0,0)</td> 
    </tr><tr> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td> 
    </tr><tr> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td> 
    </tr><tr> 
    <td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td> 
    <td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td> 
    <td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td> 
    <td style="border-top:hidden">Mirrored &minus;90° (0,-1,-1,0,0,0)</td> 
    </tr></tbody> 
    </table> 
</body></html>

Nota el truco de la clase "z" para celdas de la tabla (línea-altura: 0) que contienen solamente una imagen, para que se ajusten exactamente al tamaño de la imagen. Las imágenes que se muestran en este ejemplo son una pequeña foto cuadrada en 8 orientaciones diferentes. Solo hay un borde gris delgado de 1px que encierra cada foto y su etiqueta se muestra arriba o abajo, las fotos se ajustan exactamente dentro de los bordes de la celda.

Tenga en cuenta que la reorientación utiliza estilos WebKit (para Safari y Chrome); puede agregar las propiedades equivalentes para IE y Firefox cambiando el prefijo; para CSS3, no se necesitará prefijo. Si no estas transformaciones no son compatibles, las imágenes no serán reorientadas/reflejadas, pero aún se ajustarán exactamente a la celda, sin espacios internos adicionales.

Fuente

2011-11-24 08:28:34

IE8 altura de la celda de la tabla de estiramiento

Respuesta

Cuestiones relacionadas