Inline content and block level elements over floats

  1. Block with Width and height
  2. Block with no Width or height

Testing display properties. Very confusing now without the true IE7 to test with. Now having made mistakes I will now state the behavior of both modes of IE8. IE8 standard mode I will refered to as IE8b. IE8 IE7 mode I will refered to as IE8b~7. For this mode the test becomes complicated since in not a true pass or fail. IE8b fails in example 3~5 and 7 since the blocks are incorrectly clearing the float.

1.
display:inline x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10 & IE8b

Passed: Gecko 1.7~1.9 & Safari 3 (showing overlap)

Failed: IE 5.5, IE 6 & IE 7 (showing overlap and incorrect stacking)

Correct: IE8b~7 (showing overlap and incorrect stacking)

2.
display:block x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5, Gecko 1.7~1.9, Safari 3 & IE8b

Failed: IE 5.5, IE 6, IE 7

Correct: IE8b~7 (showing correct position due to hasLayout)

3.
display:inline-block x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Gecko 1.9 & Safari 3

Failed: Opera 9.10~9.5, IE 5.5, IE 6, IE 7 & IE8b

Not supported: Gecko 1.7~1.8

Correct: IE8b~7 (showing correct position due to hasLayout)

4.
display:table x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5, Gecko 1.7~1.9 & Safari 3

Failed: IE8b

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7 & IE8b~7

5.
display:inline-table x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Gecko 1.9 & Safari 3

Failed: Opera 9.10~9.5 & IE8b

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7 & IE8b~7

6.
display:table-cell x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.7~1.9

Failed: IE8b & Safari 3

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7 & IE8b~7

7.
display:run-in x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5, Gecko 1.7~1.9 & Safari 3

Failed: IE8b (showing as display:inline)

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7 & IE8b~7

8.
overflow:auto x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.9

Passed: Gecko 1.7~1.8 & Safari 3 (stacking over float)

Failed: IE 5.5, IE 6, IE 7 & IE8b

Correct: IE8b~7 (showing correct position due to hasLayout)

  1. Block with Width and height
  2. Block with no Width or height

CSS Class test