CSS: Em rounding error -

recently, i've rewritten css file site i'm making , tried make elements , fonts dynamic in size using em instead of px. sizes work.. kind of, there's @ least 1 issue.

when using em unit margins of box (margin: 0.25em), in firefox 4px @ top/left , 3px @ right/bottom - based on 14px font-size (which box's font-size 0.875em of browser's 16px).

now, i'm new em , it's quite possible i've misunderstood several things using understanding, i'm thinking 0.25em of 14px 3.5px. if case, , rounding cause of 4 or 3 pixels in margins, how it's supposed work? calculation rounded result should round exact same way every time, no? also, in internet explorer, it's exact opposite: top/left 3px , right/bottom 4px.i tried changing value 0.286em (x 14px -> 4.004px) avoid ending @ half pixel , turns out 4/4/4/4 in firefox 4/3/4/3 in ie.

other these pixel errors, changing browser font-size scales nicely.

am crazy, have misunderstood something, both browsers broken or.. what? (used ie8 , ff3 , 19.)

inconsistent rounding = smooth scaling

a browser may round value , round same value down @ other times, on whole rounding operations out.

the best example of when page scaled. pages scaled on mobile devices, can scaled on desktop browser if user manually zooms page. when page scaled, px values used integers floating-point values. likewise, em or % values used translate integer value in px, translate floating-point values.

for browser able plot size or position of elements in terms of screen pixels, must round each value integer. rounding works if evens out on whole.

example

let's have 3 floated divs 100px each, combined width of 300px. page scaled on mobile device 2/3 usual size. combined width of scaled divs should 200px.

if (roughly) 66.7px of each scaled div rounded up, each 1 67px, adds 201px (1 many). if each div rounded down, each 66px, adds 198px (2 few). way have sizes add 200px if rounding inconsistent (rounding 2 of them up, rounding other 1 down).

when scaling applied absolutely-positioned elements both position , size values, or elements background image taken sprite file, unevenness in rounding of scaled elements can noticeable.

browser support

the last time checked, firefox browser effective job of scaling pages, of evening out rounded values right way. other browsers may amount of (and getting better @ it), have not done in past.

this approach -- works page scaling -- same type of behavior you're encountering, though may not obvious @ first glance why it's happening.