19

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.

chrisfrancis27
  • 4,516
  • 1
  • 24
  • 32
  • 3
    Why do you need three-decimal precision? – Evan Mulawski Sep 16 '12 at 17:17
  • I've written a plugin for a fluid-width, responsive carousel. The widths and offsets are all done by dividing the number of carousel items by the total, etc. This unfortunately can end up width 3 decimal places. :/ – chrisfrancis27 Sep 16 '12 at 17:20
  • 1
    If you find yourself needing 3 decimal precision in CSS you are doing something wrong. – AntonNiklasson Oct 26 '12 at 09:26
  • @AntonNiklasson Whilst I do agree, I'm still interested as to any official specification on float precision in CSS. And I've refactored the plugin to use less DOM cloning, resulting in fewer elements, and thus no more 3-decimal precision! :) – chrisfrancis27 Oct 26 '12 at 11:04
  • 1
    Take a look at these answers: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – AntonNiklasson Oct 26 '12 at 12:55
  • @AntonNiklasson Stating that someone is doing something "wrong" is not helpful. This is a good/interesting question. Years later I've run into it while editing an open source datatable that allows for resizable column widths. With 2 decimal precision there is jitteriness in the movement, with more it's nice and smooth. So I come searching if there's a reason it was set to round widths at 2 decimal places. Understanding what the spec is, what's allowed, and how it will behave is important. – patorjk Jun 14 '20 at 15:51

2 Answers2

5

There are probably many solutions for your problem, I would suggest these:

  1. Round on 2 decimals by yourself for all but one, than reduce from total width for last one.
  2. Use table or display: table, than the browser will fix the widths by itself.
skobaljic
  • 9,379
  • 1
  • 25
  • 51
1

For anyone coming upon this question, this article goes into depth about what different browsers do for percentages with decimal points: https://cruft.io/posts/percentage-calculations-in-ie/

As for which browser is correct, according to that article:

The HTML5 Specification doesn’t mention truncating or rounding decimal places. Point 11 deals with decimal places, and says to keep looping until “position is past the end of input, then return value as a length”.

patorjk
  • 2,164
  • 1
  • 20
  • 30