為什麼 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中文網其他相關文章！