Decimal places in CSS percentage
OK, I've searched far and wide and come up with nothing more than anecdotal evidence to suggest that there is no recommended standard behaviour in the CSS specification for the precision of floating point numbers.
N.B. I'm not asking about the well known sub-pixel rounding problem.
The reason I'm asking is that IE seems to round percentage-based floating point values down to 2 decimal places, whereas Webkit and Gecko allow at least 3, or even more (I haven't tested).
For example:
li {
width: 14.768%;
}
When inspected in Chrome's Web Inspector or Firebug, the <li>s are correctly shown to have a width of 14.768%. However, in IE dev tools (IE9/8/7 mode), they have a width of 14.76%. This causes the actual pixel-based values to be completely out as well.
Can anyone shed any light on this behaviour, or provide a suitable workaround? I'd rather not have to resort to pixel-based values if possible, as the content needs to be fluid width.
I know it's pretty gnarly dealing with this many decimal places, but I'd be very interested to know which, if any, of these browsers is "correct"?
EDIT
Firefox seems to use the correct percentage values when shown in the inspector (not rounded to 2 decimal places), but is displaying the same behaviour as IE in terms of actual pixel placement.
Answer
There are probably many solutions for your problem, I would suggest these:
- Round on 2 decimals by yourself for all but one, than reduce from total width for last one.
- Use
tableordisplay: table, than the browser will fix the widths by itself.