In all the following test cases a list (ol, blue background, black border) contains some list items (li, red background) each containing a block link (a display:block, gray background, green on hover.) Depending on several factors IE7-/Win add extra vertical space.
The ‘big’ extra space (B, about the height of a line), case 1, occurs only in IE6-, it has been fixed in IE7. Not so the ‘small’ ones which depend on line-height and vertical-align and occur in various combinations. Only in IE8 the problem is fully fixed.
Description of the test cases:
lis (sY)as have hasLayout (sY aL)lis have hasLayout (sY lL)lis and list have hasLayout (sY lL LL)lis and as have hasLayout (sY aL lL)lis, after the content, before </a> (s2)lisas have hasLayout (aL)lis, as, list have hasLayout (aL lL LL)as are relative (aR)as have hasLayout, lis are inline (sY aL lI)lis have hasLayout and vertical-align:top (sY lL vV)lis, as have hasLayout, lis have vertical-align:top (aL lL LL vV)1: no hasLayout, white space
2: as have hasLayout
3: lis have hasLayout
4: lis and list have hasLayout
5: lis and as have hasLayout
6: blanks inside lis (after content, before </a>)
7: NO white space (neither between nor inside lis)
8: NO white space; as have hasLayout
9: NO white space; lis, as, list have hasLayout
10: NO white space; as are relative
11: as have hasLayout, lis are inline
12: lis have hasLayout and vertical-align:top
13: NO white space; list, lis, as have hasLayout, lis, as have vertical-align:top
Of course the above cases do not exhaust all possible combinations, however they show that hasLayout on the various elements usually creates extra vertical space (and further problems, especially on the list markers: lists, hasLayout and disappearing list markers, problems with lists and hasLayout.) A single fix for the extra space working in all cases does not seem to exist. Simplifying a bit three types of extra space can be distinguished:
lis. This is triggered by the simple presence of the block as, is sensitive to white-space, and disappears giving hasLayout to the as. This has been fixed in IE7.lis. This is triggered by hasLayout on the lis and is sensitive to vertical-align applied to them. Here the value top has been used to make it to disappear, but bottom and middle could also be useful. It looks like the lis acted as inline-blocks positioned by default on some baseline. hasLayout on the list has some effect on this space, but does not make it to disappear. hasLayout on the as makes it to disappear.lis or on the as. It interferes with the previous one, it is sometimes inside and sometimes outside the lis (depending on hasLayout on the lis? hasLayout=outside=blue, no hasLayout=inside=red.) It seems related to the fact that in IE sometimes elements have a sort of minimum height (equal to the normal line-height for the font in use.) Changing vertical-align on the lis or the as makes it to move but not to disappear. This is rather difficult to fix. Giving display:inline to the lis seems useful. Other tests of these conditions: lists with small line-heights, small line-heights, vertical-align, blocks.
eXtra vertical space: B ~ 1em, S = small, s = small, only with small line-heights, - = no) [IE7 never has B space]
Hover (T = on text, - = full width) [IE7 always full width]
Markers (N = broken, - = ok)
| s a l v L | X | H | M | h | |
|---|---|---|---|---|---|
| 1 | Y - - - - | B | T | - | |
| 2 | Y L - - - | s | - | - | |
| 3 | Y - L - - | S | T | N | |
| 4 | Y - L - L | S | T | N | |
| 5 | Y L L - - | s | - | N | |
| 6 | 2 - - - - | - | T | - | |
| 7 | - - - - - | - | T | - | |
| 8 | - L - - - | s | - | - | |
| 9 | - L L - L | s | - | N | |
| 10 | - R - - - | - | ~ | - | |
| 11 | Y L I - - | - | - | N | |
| 12 | Y - L V - | s | T | N | |
| 13 | - L L V L | s | - | N |
Further notes:
as helps when these have hasLayout and the lis do not.lis, useful to remove the small extra space when they have hasLayout, has an adverse effect on the vertical position of the markers.lis causes always problems with the markers (though different among IE 5, 5.5, 6, 7.)as causes smaller problems with the markers (when a li wraps on more lines, the marker is positioned ‘low’.)as is usually necessary in IE6- if the whole as area needs to be clickable/hoverable. position:relative on as gives the same effect in cases with small line-heights and does not introduce the extra space (s.) But with big line-heights it makes the as not to fill whole area, see IE7-/Win position relative and line-height.“the UL element inherits its line-height from the height of the font attribute for the BODY”. See some specific test cases: IE7-/Win font-size and extra space in lists.
This same page, with line-height: small (1), big (2), or with: unordered lists. To test other combinations use the form below.