警告
已停用、不受支持的 Internet Explorer 11 桌面应用程序在某些版本的 Windows 10 上已通过 Microsoft Edge 更新永久禁用。 有关详细信息,请参阅 Internet Explorer 11 桌面应用停用常见问题解答。
本文讨论在 Internet Explorer 中,如果在表单元格内部使用相对高度的 <div> 标签,表格会按设计特性调整大小的现象。
原始产品版本: Internet Explorer
原始 KB 数: 2778473
总结
如果在表格单元中对 <div> 标签使用相对高度,则可能会在 Internet Explorer 中体验到标准模式和怪癖模式的不同布局行为。 例如:
<!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>
如果使用开发人员工具切换文档模式,则检查布局时会看到不同的行为。
在上面的示例中,在怪异模式下,表格获取周围 <div> 元素的高度,即 75 像素。 第二行占用所有剩余高度,表格本身不会调整大小。
在标准模式下,表格会调整大小,因为表格第 2 行(第 2 行)的内部 <div> 标签的计算高度来源于具有绝对高度的第一个父级,即 75 像素。 这会导致整个表的大小调整,因为这两行都不能适应初始给定的高度。
详细信息
此行为是按设计进行的,并已在 2006 年随 Internet Explorer 7 被引入。 还可以在非Microsoft Web 浏览器中看到不同的行为。 目前无法仅使用 CSS 和表更改此行为。 该行为被视为标准模式下表模型的限制。 CSS 表模型实际上阻止此方案按预期工作。
出于兼容性原因,只有 quirks 模式和 quirks 模式仿真(QME)确实支持此功能。