Mor*_*eng 8 javascript firefox dom width offsetwidth
我有一个页面的div元素由JavaScript对齐.JavaScript只检查一组div元素以找到max offsetWidth,然后将所有div元素的宽度设置为max offsetWidth.它在大多数浏览器和语言环境中都很完美,但在Mac上的Firefox中法语 - 法语失败了.在这种情况下,div的内容包装.
<div id="divFoo">
Heure de dé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正确圆？
eye*_*ess 12
CSS样式规则(getComputedStyle()或Renzo Kooi getStyle()将给你的)和用户代理确定的实际计算宽度(以像素为单位)之间存在差异.
这部分是由于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值,即使它们是非整数的.
| 归档时间： |
|
| 查看次数： |
5512 次 |
| 最近记录： |