IE display: table-cell child ignores height: 100%

by

Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can’t guarantee the behavior will remain interoperable, even in other browsers).

To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.

More Related Contents:

  1. Text in a flex container doesn’t wrap in IE11
  2. CSS rotate property in IE
  3. Internet Explorer’s CSS rules limits
  4. Repeat table headers in print mode
  5. IE 6 & IE 7 Z-Index Problem
  6. CSS flexbox not working in IE10
  7. How does one target IE7 and IE8 with valid CSS?
  8. Apply style ONLY on IE
  9. z-index does not work in Internet Explorer with pdf in iframe
  10. Bootstrap dropdowns menus appearing behind other elements – IE7
  11. What bug does zoom:1; fix in CSS?
  12. CSS Selector for
  13. Any way to remove IEs black border around submit button in active forms?
  14. CSS transitions with calc() do not work in IE10+
  15. element not working in Internet Explorer 11
  16. CSS rounded corners in IE8
  17. Icon fonts not loading in IE11
  18. Vertical align table-cell don’t work with position absolute
  19. CSS Blur in IE 11
  20. Detecting IE version using CSS Capability/Feature Detection
  21. Box Shadow on table row not appearing on certain browsers
  22. On IE CSS font-face works only when navigating through inner links
  23. Does Internet Explorer support CSS transitions?
  24. CSS3 3D Transform doesn’t work on IE11
  25. IE not rendering CSS properly when the site is located at networkdrive
  26. How do I keep CSS floats in one line?
  27. How to fix Internet explorer 7 bug when using percentage widths for layout?
  28. IE6/IE7 css border on select element
  29. How to specify table’s height such that a vertical scroll bar appears?
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment