This page demonstrates how relative sizing using ems and percentages (and some other variations) affects some browsers.
Consider the paragraphs below; view them in Internet explorer, and change the font size (not the zoom) in the browser - either (IE6 and earlier) press and hold the Ctrl key and rotate the wheel on the mouse (in IE7 and later versions this affects the Zoom setting, not the Text Size setting, which is not the same thing), or use View->Text Size (all browsers except FireFox and Microsoft Edge) and select a different font size. The paragraphs are in a separate page displayed in an iFrame so that none of the CSS used in this page can affect the rendering.
[If the iFrame is blocked by Adblocker or similar browser extension, the page is here]
The lines of text below use pts, px, ems, %s, and other keywords (such as small, smaller) to set the text size.
The above is Standards Mode
Now try the same in some other browser - the font size control may vary from browser to browser. If using FireFox, use the menu View->Zoom, and ensure Zoom Text only is selected.
The text sizes displayed here will not be the same when using IE5.5 or earlier.
Keywords and Numbers
When using (deprecated) <font> tags there is an additional method of specifying font sizes - numbers. The following table shows the relationship between keywords in Quirks and Standards modes, and numbers, and gives an approximate size in points (pt) and pixels(px):
Quirks Mode in Internet Explorer
||cannot display in Quirks mode using keywords
As some browsers have a minimum size for text, this may render as the same size as x-small
||cannot display in Standards Mode using Keywords
Note: The pixels sizes given are approximations - Internet Explorer, FireFox and Opera may use different conversion factors when changing points to pixels.
Now compare the thumbnail images below. Both images (of the same adaption of the above table - see Qirks and Standards modes - font size comparisons) are rendered in Quirks mode in FireFox 2.0 and IE7. Notice that FireFox renders the font sizes smaller than the corresponding font number. This shows that using keywords is not reliable across browsers in pages rendered in Quirks mode. With a valid and complete <!doctype..> the rendering would be almost identical in IE7 and FireFox 2.0. (Full size images can be seen by clicking the thumbnails.)