Computed Width with Decimal Values in Firefox, But Without Decimals in Webkit

Computed width with decimal values in Firefox, but without decimals in Webkit

I think the answer to the bolded question is "no", and it's not clear to me what problem you're really trying to solve. You can't expect all browsers on all platforms to display your page exactly the same (e.g. because different platforms may use different fonts to render your page). If you want the div to have a fixed width, set it explicitly in CSS.

Some related links on the fractional pixels mess:

http://ejohn.org/blog/sub-pixel-problems-in-css/
DOM element width can be non-integer?

webkit just cuts off decimals in css number ... how to workaround?

I don't think you can do this elegantly. In generally it's best to see pixels as atomic units that can't be divided.

Solutions:

Find another way of positioning your elements. i.e. Use percentages or make the last column 1px shorter (or whatever your design needs to allow whole numbers to be used)
Use JS browser sniffing to add a class of "webkit" or similar to the body element and then use this to apply different style rules.

I'd suggest not using the second solution as it's probably unnecessary complicated.

Chrome brings the integer value for $('.abc').css(top);

Firefox is a little special in this case... it supports decimal pixels. This means that if you set a height OR width on f.e. an image, it will resize the picture and this calculation will contain (most likely) decimal pixels. This is the same with divs, it gets calculated and decimals are used in firefox.

As far as I know, firefox is the only major browser that support decimals...

If you need full pixels, try a regex expression or something to remove the decimals if you have a string or floor() if you have a number.

DOM element width can be non-integer?

There's a difference between the CSS style rule (which getComputedStyle() or Renzo Kooi's getStyle() will give you) and the actual computed width in pixels as determined by the user agent.

This is partly due to the fact that partial pixel values are possible in CSS, but the user agent must choose how to render partial pixels (currently, I believe they all round up or down, but are very inconsistent, particularly when translating percents to pixels [see here]).

It is important for these differences to exist, particularly as user agents implement full page zooming.

For instance, I made a test case with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Fractional pixels</title>
    <style type="text/css" media="screen">
        #fractional {
            width: 17.5px;
            height: 16.1333px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="fractional"></div>
</body>
</html>

Zoomed in one step in Safari 4 Beta, the CSS width is reported as 17.5px and the height 16.1333px. But its offsetWidth is 21 device pixels, and its offsetHeight is 19 device pixels.

The moral of the story, in short, is that if you want to match an element's actual dimensions, it's best to use its CSS values as is, even if they are non-integer.

Do different browsers render decimal percentage sizes differently?

Yes they do.

From my memory:

In Opera, you cannot set the decimal places of the percentage so, if you set 33.3% it uses only 33% (rather annoying) (edit:Opera may have improved on that in current version as it seems)

In Firefox, if you have percentages that add up to 100%, the pixels don't always add up to the 100% of the pixels

e.g. you have a outer div with three columns all with width: 33.33333%. If the outer div has width 100px, the columns will have 33 pixels and the sum is 99 pixels and not 100.
(edit: Firefox does better than I remember. Maybe they improved)

Old IE, I cannot remember IE9 seems to work fine. The bad one of course is IE7, which rounds up (as the IE6, but who cares?). IE8/9 seem to work ok

Chrome works fine

Safari: can't remember

edit

Her one can test for oneself

http://jsfiddle.net/fTpFw/

conclusion

After I played with my fiddle in different browsers I think they all have improved. The only bad implementations (from what I want to achieve) in modern browsers is Opera and Safari. IE7 is a stopper, too. If you don't have to deal with these buggers, you could go ahead and use the percentage widths.

Decimal places in CSS percentage

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 table or display: table, than the
browser will fix the widths by itself.