In the above test case some text is followed by 7 images (the colored rectangles 20px × 2px), having vertical-align respectively: 0, 16px, -16px, 1em, -1em, 1ex, -1ex. A 1em high bar is included at the end for reference.
According to the CSS 2.1 vertical-align property description, the images should be raised (positive value) or lowered (negative value) from the baseline by the specified distance. This works correctly in Firefox, Opera, Safari, IE7+.
In the above test case some text is followed by 6 images (the colored rectangles 20px × 8px), having vertical-align respectively: 25%, -25%, 50%, -50%, 100%, -100%. The line-height is set to 2 and a 1em high bar is included at the end for reference.
According to the CSS 2.1 vertical-align property description, the images should be raised (positive value) or lowered (negative value) from the baseline by the specified percentage of the line-height value. This works correctly in Firefox, Opera, IE8. Safari computes the percentage with respect to the height of the image instead of the line-height.