User:The Rooster/Sandpit/6: Difference between revisions
The Rooster (talk | contribs) No edit summary |
The Rooster (talk | contribs) No edit summary |
||
(44 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
Actually, yet more investigation yields the fact FF takes x-small as 10px, but IE as 10.05px AND IE appears to have a cumulative rounding error problem to boot. 90% would still just about round down but IE thinks otherwise. 85% still seems the best option for getting any level of consistency in this regard. | |||
---- | |||
It appears that main.css defines a font-size of x-small. Then later another class boosts this by 127% (why 127? god knows) | |||
Both browsers appear to take x-small as 10px on default settings. Thus render a default size of 12.7px which gets rounded to 13px. | |||
FF appears to get it right at 12.7px. IE likes 12.8px better (rounding error after so many levels?) | |||
Whilst these both round to 13px nominally, it might explain some of differences when applying another layer inline. | |||
For example, an additional value of 90% inline would result in 11.43 for FF, but 11.52 for IE, so FF goes for 11px and IE 12px. | |||
In this case, scaling values can be chosen, but need merely be carefully picked to avoid values that generate these differentiating results. | |||
<div style="font-size:x-small"><div style="font-size:127%"> | |||
The quick brown fox jumped over the lazy dog. x-small * 127% | |||
<div style="font-size:90%">The quick brown fox jumped over the lazy dog. as before*90%</div> | |||
</div></div> | |||
= | <div style="font-size:11px"> | ||
The quick brown fox jumped over the lazy dog. 11px | |||
</div> | |||
<div style="font-size:12px"> | |||
The quick brown fox jumped over the lazy dog. 12px | |||
</div> | |||
<div style="font-size:13px"> | |||
= | The quick brown fox jumped over the lazy dog. 13px | ||
</div> | |||
= | |||
Latest revision as of 15:18, 25 August 2009
Actually, yet more investigation yields the fact FF takes x-small as 10px, but IE as 10.05px AND IE appears to have a cumulative rounding error problem to boot. 90% would still just about round down but IE thinks otherwise. 85% still seems the best option for getting any level of consistency in this regard.
It appears that main.css defines a font-size of x-small. Then later another class boosts this by 127% (why 127? god knows)
Both browsers appear to take x-small as 10px on default settings. Thus render a default size of 12.7px which gets rounded to 13px. FF appears to get it right at 12.7px. IE likes 12.8px better (rounding error after so many levels?)
Whilst these both round to 13px nominally, it might explain some of differences when applying another layer inline.
For example, an additional value of 90% inline would result in 11.43 for FF, but 11.52 for IE, so FF goes for 11px and IE 12px.
In this case, scaling values can be chosen, but need merely be carefully picked to avoid values that generate these differentiating results.
The quick brown fox jumped over the lazy dog. x-small * 127%
The quick brown fox jumped over the lazy dog. 11px
The quick brown fox jumped over the lazy dog. 12px
The quick brown fox jumped over the lazy dog. 13px