Question

我有一个页面的div元素由JavaScript对齐。 JavaScript只检查一组div元素以找到最大 offsetWidth ，然后设置所有div元素' width 最大 offsetWidth 。它在大多数浏览器和语言环境中都很完美，但在Mac上的Firefox中法语 - 法语失败了。在这种情况下，div的内容包装。

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

对于上面的HTML，代码报告“79”下面。

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

但低于代码报告“79.1333px”。

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

79.1333和79之间的差距使宽度设置为内联样式不正确。

我曾经认为 offsetWidth 和 width 应始终为整数。有没有办法正确地使 offsetWidth 圆？

Answer 1

CSS样式规则（getComputedStyle()或Renzo Kooi的getStyle()将给你）与用户代理确定的实际计算宽度（以像素为单位）之间存在差异。

这部分是由于CSS中可能存在部分像素值，但用户代理必须选择如何渲染部分像素（目前，我相信它们全部向上或向下，但是非常不一致，特别是在翻译时像素百分比[见here]）。

存在这些差异非常重要，特别是当用户代理实现整页缩放时。

例如，我用这个做了一个测试用例：

<!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>

在Safari 4 Beta中一步缩放，CSS宽度报告为17.5px，高度为16.1333px。但它的offsetWidth是21个设备像素，其offsetHeight是19个设备像素。

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

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

1 个答案: