Font Size - Relative Size Keywords With Relative Length Units (px, em, ex) and Percentage Values

The relative size keywords can be applied to text whose inherited size was specified using percentage values or the relative length units px, em and ex. Unfortunately, with a given combination of relative size keywords and relative length units (or percentage values), the resulting font size varies across browsers.
In a particular browser, whether the font size is inherited from relative length units or percentage values, for a particular computed font size, the relative size keywords behave the same (except for IE6 and IE7 when the computed size is 18px).
Example 1:<p style="font-size:0.9em">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>

Example 2:<p style="font-size:9px">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>

Example 3:<p style="font-size:90%">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text </span></p>

Example 4:<p style="font-size:1.8ex">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>
Advantages and Disadvantages: The application of relative size keywords to text whose inherited size was specified using percentage values and the relative length units px, em and ex results in inconsistent font sizes across browsers. Therefore, this combination must be avoided if consistent appearance across browsers is desired.

---

Notes and Example Data:
Firefox 3: If the keywords larger or smaller are applied to text whose computed size corresponds to an absolute keyword font size (9, 10, 13, 16, 18, 24 and 32 pixels), then FF3 "upgrades" or "downgrades" the text to the nearest absolute keyword's font size.
For other computed sizes, FF3 multiplies or divides the computed font size by a number ranging from 1.11 to 1.5 .
Opera 9.5: Opera's relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is also consistent with its absolute keyword scaling. For other px sizes, Opera 9.5 multiplies or divides with a number ranging from 1.11 or 1.29 .
IE7 and IE6: The relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is not consistent with its absolute keyword scaling. The scaling of 10px and 13 px with the keyword smaller does not match the scaling of x-small and small with smaller.
IE6 and IE7 multiplies or divides the relative keywords with a number ranging from 1 to 1.5
Safari 3.1: Safari's relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is largely consistent with its absolute keyword scaling with the exception that font sizes are allowed to go below 9px.
Safari 3.1 does relative keyword scaling by multiplying or dividing by a figure ranging from 1.12 to 1.29
Internet Explorer 6 and 7 relative size keyword bug:

	larger	larger-larger
parent style: font-size: 18px	18	24
ancestor font size = 10px inherited font size: 1.8em or 3.6ex or 180%	24	32

The first row shows the resulting font size in pixels when the inherited font size was specified as 18px. The second row shows the resulting font size when the ancestor font size was 10px and the inherited font size was specified as 1.8em or 3.6em or 180% (which results in a computed value of 18px).
The resulting font size is supposed to the same - that is, both the rows should have the same pair of values. This is an IE6 and IE7 bug.
Here is a table that shows the resulting font size when the relative keywords are applied to text with various inherited font sizes. All font sizes are in pixels. The columns smaller-smaller and larger-larger indicate nested relative keywords ie. the relative keyword was applied twice through nested elements.

Table Caption: Relative sizing of text with inherited font size from relative length units or percentage values

inherited font size	smaller	smaller-smaller	larger	larger-larger
9	8	7	10	13	Firefox 3
10	9	8	13	16
11	9	8	14	17
12	10	9	15	17
13	10	9	16	18
14	11	9	17	20
15	12	10	17	22
16	13	10	18	24
17	15	12	21	28
18	16	13	24	32
19	16	14	25	35
24	18	16	32	48
32	24	18	48	72
9	8	7	11	13	Opera 9.5
10	9	8	12	14
11	9	8	13	16
12	10	9	15	17
13	10	9	16	19
14	11	9	17	20
15	12	10	18	22
16	13	10	19	23
17	14	11	20	24
18	14	12	22	26
19	15	12	23	27
24	19	15	29	35
32	26	20	38	46
9	6	4	10	13	IE6 , IE7
10	7	4	10	13
11	10	7	13	16
12	10	7	13	16
13	10	7	13	16
14	13	10	16	18
15	13	10	16	18
16	13	10	18	24
17	16	13	18	24
18	16	13	24	32
19	18	16	24	32
24	18	16	32	48
32	24	18	48	72
9	7	6	11	13	Safari 3.1
10	8	7	12	14
11	9	8	13	16
12	10	8	14	17
13	11	9	16	19
14	12	10	17	20
15	12	10	18	22
16	13	11	19	23
17	14	12	20	24
18	15	12	22	26
19	17	13	23	27
24	20	17	29	35
32	27	22	38	46