| 27 | 28 | 29 | 30 | |||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| z10 | z11 | z12 | z13 | z14 | z15 | z16 | z17 | z18 | z19 | z20 | z10 | z11 | z12 | z13 | z14 | z15 | z16 | z17 | z18 | z19 | z20 | z10 | z11 | z12 | z13 | z14 | z15 | z16 | z17 | z18 | z19 | z20 | z10 | z11 | z12 | z13 | z14 | z15 | z16 | z17 | z18 | z19 | z20 | |
| Verdana | ||||||||||||||||||||||||||||||||||||||||||||
| Arial | ||||||||||||||||||||||||||||||||||||||||||||
| Times New Roman | ||||||||||||||||||||||||||||||||||||||||||||
| Georgia | ||||||||||||||||||||||||||||||||||||||||||||
| Courier New | ||||||||||||||||||||||||||||||||||||||||||||
| Trebuchet MS | ||||||||||||||||||||||||||||||||||||||||||||
An image (red rectangle) with vertical-align: middle is the only content of a box (black background), so the box has always the height of the image. In IE5.5-7/Win the image is sometimes positioned one pixel too low, leaving a 1 pixel black row at the top. The last 1 pixel row of the image protrudes out of the container if the image has position:relative, otherwise it is cropped.
This behavior occurs only with some combinations of image height, font-family and font-size. Line-height is not relevant, as well as hasLayout and position:relative on the container.
The combinations having the 1px bottom shift are the ones where the image height and the “default line-height” have different parity. The “default line-height” is the height of a line box containing only text and having no specified line-height; it depends on font-family and font-size (normally it is about 1.2 times the font-size.)
In the above table of test cases:
A javascript function adds for each test case: the computed image shift (0 or 1), the “default line-height” in effect, the container height, and possibly a red ‘E’ indicating that the above assumption about the presence of image vertical shift is not verified. Of course this ‘E’ shows up in non-IE browsers that do not have the shift problem.