In the all the belove nine test cases an UL (with fixed width) has three LI with list-style-type:none, 0 margins and paddings, and a 1px border (red, green, blue).

  1. In the 1st case the LI have some text content.
  2. In the 2nd case the LI are empty.
  3. In the 3rd case the LI contain grey blocks with 5px height.
  4. In the 4th case the LI contain grey floated blocks with 5px height.
  5. In the 5th case the LI contain grey absolutely positioned blocks with 5px height.
  6. In the 6th case the LI contain display:none blocks.
  7. The 7th list is like the 2nd, with font-size: 200%.
  8. The 8th list is like the 2nd, with line-height: 2.
  9. The 9th list is like the 4th, with font-size: 200%.
  10. The 10th list is like the 4th, with line-height: 2.
1
2
3
4
5
6
7
8
9
10

Sometimes in IE/Win the LI seem to have a minimum height.

In IE7 (and probably lower) this occurs in all the above test cases. The minimum height is equal to one line height: it varies with font size (cases 7, 9); and with line-height (case 10, but not with empty content, case 8).

In IE8b1 the LI minimum height shows up only when the LI have non in-flow content (cases 4, 5, 9, 10).

The following eight test cases 2a–10a are like the above 2–10, but now the LI have display: block. There is no more LI minimum height in IE8b1. No changes in IE7-.

2a
3a
4a
5a
6a
7a
8a
9a
10a

Other test cases of similar problems IE8b1: list items vertical spacing problems, IE8b1: extra space with LI containing floats.

CSS tests home