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 | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
Arial | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
Times New Roman | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
Georgia | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
Courier New | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
Trebuchet MS | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x | x |
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 (transitional doctype, not relevant for IE7-). 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 (and IE8) that do not have the shift problem.