为什么 IE 不尊重表格单元格子元素的'height: 100%”？

IE 忽略表格单元格子元素的高度：100%

在 IE8 及以上版本中使用 CSS 表格动态构建表格时会出现此问题。尽管规范声称完全支持相关显示属性，但 IE 的行为却出人意料，忽略了为表格单元格（“Elem”）内的子元素（“Content”）设置的 height: 100%。这会导致显示扭曲，子元素的高度被截断。

根本原因：

这种差异的原因在于 CSS 规范本身。该规范未定义高度百分比值对 display: table-row 和 display: table-cell 元素的影响。这意味着 CSS 表格的浏览器实现在百分比高度方面具有不同的行为。

解决方法：

考虑到浏览器实现的可变性，找到一个跨浏览器的仅 CSS解决方案可能不可行。但是，有几种替代方法可供考虑：

• JavaScript 解决方法： 使用 JavaScript 根据父表的高度动态计算和设置子元素的高度。
• 无表格解决方案：避免使用CSS表格，而是使用其他方法（如flexbox或grid）实现布局布局。
• 固定高度：为子元素设置特定的固定高度，确保其适合表格单元格。

浏览器不兼容：

请务必注意，此问题会影响 IE 的所有版本，包括11. 因此，依赖 IE 特定的 CSS hack 可能无法解决所有 IE 版本的问题。

以上是为什么 IE 不尊重表格单元格子元素的'height: 100%”？的详细内容。更多信息请关注PHP中文网其他相关文章！