Why Doesn't IE Respect `height: 100%` for Table Cell Child Elements?

IE Ignores Height: 100% for Table Cell Child Elements

The issue arises when using CSS tables in IE8 and above to dynamically construct tables. Despite the specification claiming full support for related display properties, IE behaves unexpectedly, ignoring the height: 100% set for the child element ("Content") within the table cell ("Elem"). This leads to a distorted display where the child element's height is cut off.

Underlying Cause:

The cause of this discrepancy lies in the CSS specification itself. The specification leaves the effect of percentage values for height on display: table-row and display: table-cell elements undefined. This means that browser implementations of CSS tables have varying behaviors regarding percentage heights.

Workarounds:

Given the variability in browser implementation, finding a cross-browser CSS-only solution may not be feasible. However, there are several alternative approaches to consider:

• JavaScript workaround: Use JavaScript to calculate and set the height of the child element dynamically based on the parent table's height.
• Tableless solution: Avoid using CSS tables and instead implement the layout using other methods like flexbox or grid layout.
• Fixed height: Set a specific fixed height for the child element, ensuring it fits within the table cell.

Browser Incompatibility:

It's important to note that this issue affects all versions of IE up to and including 11. Therefore, relying on an IE-specific CSS hack may not resolve the problem across all IE versions.

The above is the detailed content of Why Doesn't IE Respect `height: 100%` for Table Cell Child Elements?. For more information, please follow other related articles on the PHP Chinese website!