Recently, I decided to update the CSS file for a website I'm working on by making most elements and fonts dynamic in size using the em unit instead of px. The new sizes seem to be working, but there's an issue that's been bothering me.
It seems that when I use the em unit for setting margins on a box (margin: 0.25em), I'm getting different results in Firefox compared to Internet Explorer. In Firefox, I get 4px on the top and left, and 3px on the right and bottom, based on a font size of 14px (which is actually 0.875em of the browser's default 16px font size).
As someone new to using em units, I might be missing something, but based on my calculations, 0.25em of 14px should be 3.5px. So, why the discrepancy between 3px and 4px? Shouldn't rounding be consistent? In Internet Explorer, the margins are actually reversed: 3px on the top and left, and 4px on the right and bottom. I even tried adjusting the value to 0.286em to avoid dealing with half pixels, but the results were still inconsistent between browsers.
Despite these pixel discrepancies, I have to admit that changing the browser's font size does a nice job of scaling everything smoothly.
Am I missing something important here or are both browsers experiencing some sort of bug? (I tested on IE8, FF3, and FF19.)