DOM element width can be non-integer?

I have some one page whose div elements are aligned by JavaScript. The JavaScript just check a set of div elements to find the max offsetWidth, then set all div elements' width to be the max offsetWidth. It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. In this case, the content of div wraps.

<div id="divFoo">
    Heure de d&#233;but :
</div>

for above HTML, below code report "79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

but below code report "79.1333px".

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

The gap between 79.1333 and 79 makes incorrect width set to inline style.

I used to thought that offsetWidth and width should always be integer. Is there any way to make offsetWidth round correctly?

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.

Recommended topics

Hot tags