top bottom baseline middle text-top text-bottomIn 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:
top bottom baseline middle text-top text-bottomFirst 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.