admin管理员组

文章数量:1343934

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?

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?

  • javascript
  • firefox
  • dom
  • width
  • offsetwidth
Share Improve this question edited Mar 12, 2009 at 6:24 eyelidlessness 63.5k12 gold badges92 silver badges95 bronze badges asked Mar 12, 2009 at 4:27 Morgan ChengMorgan Cheng 76.1k67 gold badges177 silver badges232 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 12

There's a difference between the CSS style rule (which getComputedStyle() or Renzo Kooi's getStyle() will give you) and the actual puted 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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/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.

本文标签： javascriptDOM element width can be nonintegerStack Overflow

版权声明：本文标题：javascript - DOM element width can be non-integer? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743698713a2523946.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。