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

【问题标题】：DOM element width can be non-integer?DOM元素宽度可以是非整数吗？
【发布时间】：2010-10-12 20:22:14
【问题描述】：

我有一个页面，其 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 之间的间隙导致不正确的 width 设置为内联样式。

我曾经认为 offsetWidth 和 width 应该总是整数。有什么方法可以使 offsetWidth 正确圆整？

【问题讨论】：

标签： javascript firefox dom width offsetwidth

【解决方案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 值，即使它们不是整数。

【讨论】：