ansaurus

Question

Answer 1

+3 A:

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"&gt;
<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.

eyelidlessness 2009-03-12 06:43:40

ansaurus

tags:

views:

answers:

DOM element width can be non-integer?

related questions