DOM元素的宽度可以是非整数吗？ [英] DOM element width can be non-integer?
问题描述
< div id =divFoo>
Heure de d&＃233;但是：
< / div>
以上HTML，以下代码报告79。
javascript：alert（document.getElementById（'divFoo'）。offsetWidth）;
但下面的代码报告79.1333px。
javascript：alert（window.getComputedStyle（document.getElementById（'divFoo'），null）.width））
79.1333和79之间的差距使得 宽度 设置为内联样式。
我曾经认为， 和 宽度 应该是整数。有没有办法使 offsetWidth 正确地循环？
有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/xhtmlxml：lang =enlang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>分数像素< / title>
< style type =text / cssmedia =screen>
#fractional {
width：17.5px;
height：16.1333px;
背景：红色;
}
< / style>
< / head>
< body>
< div id =fractional>< / div>
< / body>
< / html>
在Safari 4 Beta中放大一步，CSS宽度报告为17.5px，高16.1333 PX。但是它的 offsetWidth 是21个设备像素，其 offsetHeight 是19个设备像素。
简而言之，道德是，如果要匹配元素的实际尺寸，最好尽可能使用其CSS值，即使它们是非整数。
I have some one page whose div elements are aligned by 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. It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. In this case, the content of div wraps.
<div id="divFoo">
Heure de début :
</div>
for above HTML, below code report "79".
javascript:alert(document.getElementById('divFoo').offsetWidth);
but below code report "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.
I used to thought that offsetWidth and width should always be integer. Is there any way to make offsetWidth round correctly?
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.
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]).
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. But its offsetWidth is 21 device pixels, and its offsetHeight is 19 device pixels.
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.
这篇关于DOM元素的宽度可以是非整数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
