DOM元素宽度可以是非整数？

Question

I have some one page whose div elements are aligned by JavaScript. 我有一个页面的div元素由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 . JavaScript只检查一组div元素以找到max offsetWidth ，然后将所有div元素的宽度设置为max offsetWidth 。 It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. 它在大多数浏览器和语言环境中都很完美，但在Mac上的Firefox中法语 - 法语失败了。 In this case, the content of div wraps. 在这种情况下，div的内容包装。

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

for above HTML, below code report "79". 对于上面的HTML，在代码报告“79”下面。

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

but below code report "79.1333px". 但在代码报告“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. 79.1333和79之间的差距使得不正确的宽度设置为内联样式。

I used to thought that offsetWidth and width should always be integer. 我以前认为offsetWidth和width应该总是整数。 Is there any way to make offsetWidth round correctly? 有没有办法让offsetWidth正确圆？

Answer 1

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. CSS样式规则（ getComputedStyle()或Renzo Kooi的getStyle()将为您提供）与用户代理确定的实际计算宽度（以像素为单位）之间存在差异。

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 ]). 这部分是由于CSS中可能存在部分像素值这一事实，但用户代理必须选择如何渲染部分像素（目前，我相信它们全部向上或向下，但非常不一致，特别是在将百分比转换为像素时[见这里 ]）。

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. 在Safari 4 Beta中一步缩放，CSS宽度报告为17.5px，高度为16.1333px。 But its offsetWidth is 21 device pixels, and its offsetHeight is 19 device pixels. 但它的offsetWidth是21个设备像素，其offsetHeight是19个设备像素。

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. 简而言之，故事的寓意是，如果你想匹配一个元素的实际尺寸，最好按原样使用它的CSS值，即使它们是非整数的。

DOM元素宽度可以是非整数？

问题描述

1 个解决方案

解决方案1
12 已采纳 2009-03-12 06:43:40

DOM元素宽度可以是非整数？

问题描述

1 个解决方案

解决方案1 12 已采纳 2009-03-12 06:43:40

解决方案1
12 已采纳 2009-03-12 06:43:40