9

我有一个页面，其 div 元素由 JavaScript 对齐。JavaScript 只需检查一组 div 元素以找到最大offsetWidth，然后将所有 div 元素的宽度设置为最大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 变圆吗？

4

1 回答 1

12

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

这部分是因为部分像素值在 CSS 中是可能的，但是用户代理必须选择如何渲染部分像素（目前，我相信它们都是向上或向下舍入的，但非常不一致，特别是在将百分比转换为像素时[见这里]）。

存在这些差异很重要，尤其是当用户代理实现全页缩放时。

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

<!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 值，即使它们不是整数。

于 2009-03-12T06:43:40.980 回答