Cálculo de alto de tabla inesperado en modo de estándares de Internet Explorer
Importante
La aplicación de escritorio Internet Explorer 11 está retirada y sin soporte a partir del 15 de junio de 2022 para determinadas versiones de Windows 10.
Todavía puede acceder a sitios antiguos heredados que requieren Internet Explorer con el modo Internet Explorer en Microsoft Edge. Obtenga más información.
La aplicación de escritorio Internet Explorer 11 se redirigirá progresivamente al explorador Microsoft Edge, más rápido y seguro. En última instancia, se deshabilitará a través de Windows Update. Deshabilite IE hoy.
En este artículo se describe un comportamiento por diseño en el que se cambia el tamaño de una tabla si se usa el alto relativo para una etiqueta dentro de una celda de <div> tabla en Internet Explorer.
Versión del producto original: Internet Explorer
Número KB original: 2778473
Resumen
Si usa el alto relativo para una etiqueta dentro de una celda de tabla, puede experimentar distintos comportamientos de diseño para el modo estándar y las peculiaridades <div> en Internet Explorer. Por ejemplo:
<!DOCTYPE HTML>
<html>
<body>
<div style='height: 75px'>
<table style='height:100%'>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td style='height:100%'>
<div style='height:100%'>Row 2</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Si alterna el modo de documento con las herramientas de desarrollador, verá un comportamiento diferente al comprobar el diseño.
En el ejemplo anterior, en modo de peculiaridades, la tabla obtiene el alto del elemento circundante, que <div> es de 75 píxeles. La segunda fila toma todo el alto restante y la tabla en sí no cambia de tamaño.
En modo estándar, la tabla cambia de tamaño porque la etiqueta interna de la fila 2 de la tabla (fila 2) toma su alto calculado del primer elemento primario con un alto absoluto, que es <div> de 75 píxeles. Esto provoca un cambio de tamaño de toda la tabla, ya que ambas filas no pueden caber en el alto inicial dado.
Más información
Este comportamiento es por diseño y se introdujo con Internet Explorer 7 en 2006. También puede ver diferentes comportamientos en exploradores web que no son de Microsoft. Actualmente no hay ninguna forma de cambiar este comportamiento usando solo CSS y tablas. El comportamiento se considera una limitación del modelo de tabla en modo estándar. El modelo de tabla CSS impide realmente que este escenario funcione como se esperaba.
Solo el modo de quirks y la emulación del modo de peculiaridades (QME) admiten esto por motivos de compatibilidad.