If I use the following CSS:
p {
font-size: 20.5px;
}
Will all browsers draw that as 20.5px, or will some round the value?
If I use the following CSS:
p {
font-size: 20.5px;
}
Will all browsers draw that as 20.5px, or will some round the value?
Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding
This contains a table that shows the following:
Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10 truncate to 2 decimal places
Internet Explorer 11 truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31 truncate to 3 decimal places
Chrome 20 round to 15 decimal places
Chrome 21 round to 15 decimal places
Chrome 37 round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion) round to 15 decimal places
Safari 7 (OSX Mavericks) round to 15 decimal places
Mobile Safari 7 (iOS7) round to 15 decimal places
Mobile Safari 8 (iOS8) round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3] round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2] round to 15 decimal places
Android Browser 4 (Gingerbread) [S2] truncate to 3 decimal places
Opera 12 truncate to 2 decimal places
Opera Next 24 round to 13 decimal places
All latest versions of browsers allow for sub-pixel rendering*. See the research and the table of differences between browser versions.
Older browsers mostly round the pixels down. Most notable exception is IE8 and IE9 which round to the nearest integer (IE7 does also round down, IE10 and up use sub-pixel rendering).
* If you define the size in percentages, the value in pixels might be different as when you directly define it in pixels.