IE8 overflow and expanding box bugs

The bugs below were found when testing a web application in Internet Explorer 8 that used boxes filled with dynamic content.

The bugs occur when the Trident render engine of Internet Explorer 8 is used, so you can see them in the default Standards Mode, not in Compatibility View.

Bug 1: When using overflow: scroll the entire page disappears in IE8


Instead of adding a scrollbar to the boxes like in other browsers, clicking the above button that changes the overflow from auto to scroll will cause the entire page to disappear in Internet Explorer 8!

Only three CSS rules are needed to trigger this bug:

float: left; max-height: 40px; overflow: scroll

(float: right; or any other size for max-height will trigger the bug too)

View minimal test case (no page will appear in IE8)

Bug 2: IE8 expands the width of the box despite a set max-width

max-width: 100px

100px
100px
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z
  1. Box 2
  1. Box 2
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z

Only three CSS rules are needed to trigger this bug:

float: left; max-width: 100px; overflow-y: scroll

(float: right; or any other size for max-width smaller then the content in the box or overflow(-y): auto; will trigger the bug too)

View minimal test case

Bug 3: IE8 expands the height of the box with scrollbar despite a set height

height: 200px

200px
200px
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z
  1. Box 2
  1. Box 2
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z

"Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars."

Quote from the W3C CSS 2.1 Specification
Section 11.1.1 Overflow: the 'overflow' property

Only two CSS rules are needed to trigger this bug:

max-height: 17px; overflow-x: scroll

(any other size for max-height or overflow(-y): scroll; or overflow-x: auto; with overflowing content will trigger the bug too)

or

min-height: 200px; width: 100px; overflow-x: auto

(any other size for min-height or any other size for width smaller then the content in the box or overflow(-y): auto; or overflow-y: scroll; will trigger the bug too)

View minimal test case

Bug 4: IE8 expands the height and width despite they're both set

max-height: 200px; max-width: 100px

Notice that clicking in the too tall displayed boxes (the ones with overflowing content) will solve the expanded height bug from that box on, because the horizontal scrollbar disappears then. This won't solve the expanded width bug.

So you can fix the expanded height bug of all boxes by clicking in the first too tall displayed box, while clicking in the second fixes the bug only for that one.

Isn't that nice?

200px
200px
100px
100px
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z
  1. Box 2
  1. Box 2
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z

Only four CSS rules are needed to trigger these bugs:

float: left; max-height: 200px; max-width: 100px; overflow-x: auto

(float: right; or any other size for (max-)height or max-width smaller then the content in the box or overflow(-y): auto; will trigger the bugs too)

View minimal test case

Workaround: Set min-height to 17px less then the desired height

min-height: 183px; height: 200px

The scrollbar is 17px wide, so if you set min-height to 200px - 17px = 183px the scrollbar Internet Explorer 8 expands at the bottom of the box moves up 17px resulting in the boxes with and without scrollbar becoming the desired height. The downside is that you can can't properly use max-height anymore.

200px
200px
100px
100px
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z
  1. Box 2
  1. Box 2
  1. Box Content 1a
  2. Box Content 1b
  3. Box Content 1c
  4. Box Content 1d
  5. Box Content 1e
  6. Box Content 1f
  7. Box Content 1g
  8. Box Content 1h
  9. Box Content 1i
  10. Box Content 1j
  11. Box Content 1k
  12. Box Content 1l
  13. Box Content 1m
  14. Box Content 1n
  15. Box Content 1o
  16. Box Content 1p
  17. Box Content 1q
  18. Box Content 1r
  19. Box Content 1s
  20. Box Content 1t
  21. Box Content 1u
  22. Box Content 1v
  23. Box Content 1w
  24. Box Content 1x
  25. Box Content 1y
  26. Box Content 1z

Bug 5: IE8 renders max-height as height when there's a scrollbar

max-height: 200px


These boxes should be green only.

If you see red, the box is too tall.

This is caused by max-height being rendered as height.

Box 2

Only two CSS rules are needed to trigger this bug:

max-height: 200px; overflow-x: scroll

(any other size for max-height or overflow: scroll; or overflow(-x): auto; with overflowing content will trigger the bug too)

View minimal test case


Modified versions of the test cases which demonstrate these bugs have been included as Contributions to the W3C CSS 2.1 Conformance Test Suite


About the W3C CSS 2.1 Specification

The W3C CSS 2.1 Conformance Test Suite


Copyright © Hilbrand Edskes