In IE6 a specified line-height is ignored in presence of images (and other replaced contents), see IE Line-height / Replaced Element Bug, IE6-/Win line-height problem with images.

In IE7 this has been corrected, but there is still a problem with the vertical alignment of images (and other content) inside line boxes with assigned line-height. The top and bottom values of vertical-align still ignore the specified line-height.

In the two test cases, six images (colored rectangles) are vertically positioned with the following values for vertical-align:

First case, line-height: 2


Second case, line-height: normal


The red and blue images should always touch the box horizontal borders. In the first case they are positioned by IE7 in the same place (relatively to the text) as in case 2, i.e. they seem not to see the expanded line-height. In IE6 the whole case 1 is rendered the same as case 2, i.e. the line-height is not honored.

In all IE7-/Win the green images (vertical-align: middle) are nicely in the vertical middle of the box. Unfortunately this is not what the specs say (sigh!)

Some more test cases about line-height, images and vertical-align.

CSS tests home