As seen on the Technorati tags page and, briefly, discussed on Eric Meyer's blog.
This bug is distinct from but may be loosely related to previously noted errors - Percentages always rounded down and Quantization error for em values in Opera 7.
Reported to Opera as bug number 173568
Quirks or Standards mode makes no difference.
As this seems to be a rounding error the user's choice of default font-size (or the author's choice depending on how the two combine in specific cases) determines whether the bug appears or not.
If % are used instead of em then the displayed font size doesn't increase until the style is font-size: 106.25% or greater, this is due to the previously reported percentages always rounded down bug.
ul {font-size: 16px;}
ul em {font-style: normal;}
.list103 em {font-size: 1.03em;}
.list105 em {font-size: 1.05em;}
<ul class="list103">
<li>Lorem Ipsum - No <em> elements</li>
<li><em>Lorem Ipsum - One <em> element</em></li>
<li><em><em>Lorem Ipsum - Two <em> elements</em></em></li>
<li><em><em><em>Lorem Ipsum - Three <em> elements</em></em></em></li>
<li><em><em><em><em>Lorem Ipsum - Four <em> elements</em></em></em></em></em></li>
<li><em><em><em><em><em>Lorem Ipsum - Five <em> elements</em></em></em></em></em></li>
</ul>
<ul class="list105">
<li>Lorem Ipsum - No <em> elements</li>
<li><em>Lorem Ipsum - One <em> element</em></li>
<li><em><em>Lorem Ipsum - Two <em> elements</em></em></li>
<li><em><em><em>Lorem Ipsum - Three <em> elements</em></em></em></li>
<li><em><em><em><em>Lorem Ipsum - Four <em> elements</em></em></em></em></em></li>
<li><em><em><em><em><em>Lorem Ipsum - Five <em> elements</em></em></em></em></em></li>
</ul>
As the em, when used on the font-size property, refers to the computed font size of the parent element this behaviour could be explained by Opera taking the computed font size as the rounded to the nearest pixel size rather than a precisley calculated value. With the common browser default font size of 16px, 1.03em = 16.48px, rounded down to 16px. If the second 1.03em is applied to the rounded down value rather than to the 16.48px value then that and all subsequent calculations will also be rounded down to 16px.
On the other hand, if the font-size is set to 1.04 then the rounding down occurs if it set to 1.0401 then it does not. 16 × 1.04 = 16.64 and 16 × 1.0401 = 16.6416. Why a rounding break point there?
home > web development > opera font sizing rounded down