当指定width：时，在IE中使用borderLeft错误？ [英] offsetLeft bug with borders in IE when width: is specified?
问题描述
请参阅： http://www.mattkruse.com/temp/offsetleft .html
看来IE6中的offsetLeft值（未测试的其他版本）
错误地忽略了DIV上的边框宽度是宽度：
属性指定。没有指定的宽度：它是正确的。
有谁知道
1）如果这是一个已知的错误，并且它是否影响任何其他浏览器？我测试了一下
，发现没有问题。
2）是否有解决办法来达到正确的值
不打破其他已经正确使用的浏览器？使用浏览器
嗅探不是我的首选。
出于讨论目的，这里是上面网址的内容。请注意，线条
可能会不恰当地换行。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title>< / title>
< style type =" text / css">
body {余量：0; }
< / style>
< / head>
< body>
< hr>
< B>在IE6中，这报告来自BODY的spanLeft of span是：35"这是
正确（10px边框+ 25px填充）< / B>
< br>
< pre>
& lt; div style =" border：10px solid black;填充：25px;
背景颜色：黄色;& gt;
& lt; span id =" span1"& gt; span& lt ; / span& gt;
& lt; / div& gt;
< / pre>
< div id =" ; DIV1" style =" border：10px solid black;填充：25px;
背景颜色：黄色;">
< span id =" span1"> span< / span>
< / div>
offsetLeft of span from
< script type =" text / javascript">
document.write（document.getElementById（''span1''）。of fsetParent.nodeName）
< / script>
是：
< script type =" text / javascript">
document.write（document.getElementById（''span1''）。of fsetLeft）
< / script>
< br>
< br>
< hr>
< B>在IE6中，这报告来自DIV的跨度的offsetLeft是：25。这是
不正确。 10px边框被忽略。唯一的区别是这个DIV
的宽度是指定的。< / B>
< br>
< ; pre>
& lt; div style =" border：10px solid black;填充：25px;
背景颜色：黄色; width：200px;"& gt;
& lt; span id =" span2"& gt; span& lt; / span& gt;
& lt; / div& gt;
< / pre>
< div id =" div2" style =" border：10px solid black;填充：25px;
背景颜色：黄色;宽度：200px;">
< span id =" span2"> span< / span>
< / div>
offsetLeft of span from
< script type =" text / javascript">
document.write（document.getElementById（''span2''） .of fsetParent.nodeName）
< / script>
是：
< script type =" text / javascript">
document.write（document.getElementById（''span2''）。of fsetLeft）
< / script>
< / body>
< / html>
-
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
See: http://www.mattkruse.com/temp/offsetleft.html
It appears that the offsetLeft value in IE6 (other versions not tested)
incorrectly ignores the border width on a DIV when there is a width:
property specified. Without a specified width: it gets it correct.
Does anyone know
1) If this is a known bug, and if it affects any other browsers? I tested a
few and found no problems.
2) Is there a work-around for this to arrive at the correct value which will
not break other browsers which already get it right? Resorting to browser
sniffing is not my preference.
For discussion purposes, here is the content of the url above. Beware, lines
may wrap inappropriately.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<hr>
<B>In IE6, this reports "offsetLeft of span from BODY is: 35" which is
correct (10px border + 25px padding)</B>
<br>
<pre>
<div style="border:10px solid black; padding:25px;
background-color:yellow;">
<span id="span1">span</span>
</div>
</pre>
<div id="div1" style="border:10px solid black; padding:25px;
background-color:yellow;">
<span id="span1">span</span>
</div>
offsetLeft of span from
<script type="text/javascript">
document.write(document.getElementById(''span1'').of fsetParent.nodeName)
</script>
is:
<script type="text/javascript">
document.write(document.getElementById(''span1'').of fsetLeft)
</script>
<br>
<br>
<hr>
<B>In IE6, this reports "offsetLeft of span from DIV is: 25" which is
incorrect. The 10px border is ignored. The only difference is that this DIV
has a width specified.</B>
<br>
<pre>
<div style="border:10px solid black; padding:25px;
background-color:yellow; width:200px;">
<span id="span2">span</span>
</div>
</pre>
<div id="div2" style="border:10px solid black; padding:25px;
background-color:yellow; width:200px;">
<span id="span2">span</span>
</div>
offsetLeft of span from
<script type="text/javascript">
document.write(document.getElementById(''span2'').of fsetParent.nodeName)
</script>
is:
<script type="text/javascript">
document.write(document.getElementById(''span2'').of fsetLeft)
</script>
</body>
</html>
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
推荐答案
Matt Kruse写道：
Matt Kruse wrote:
参见： http://www.mattkruse.com/temp/offsetleft.html
看来IE6中的offsetLeft值（未经测试的其他版本）当指定宽度：
属性时，错误地忽略DIV上的边框宽度。没有指定的宽度：它是正确的。
See: http://www.mattkruse.com/temp/offsetleft.html
It appears that the offsetLeft value in IE6 (other versions not tested)
incorrectly ignores the border width on a DIV when there is a width:
property specified. Without a specified width: it gets it correct.
< http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight。 asp>
符合层叠样式表，1级（CSS1）盒子模型，
Microsoft Internet Explorer 6及更高版本计算对象的高度<当您在文档中使用！DOCTYPE声明来
切换标准兼容模式时，
会有所不同。这种差异可能会影响offsetHeight propety的
值。当打开标准兼容模式
时，height属性指定顶部
与围绕对象'b'的边界框底边之间的距离/>
内容。当没有打开符合标准的模式，并且使用早期版本的Internet Explorer时，
还包括围绕对象''的边框和填充带。 s
边界框。有关详细信息，请参阅Internet中的CSS增强功能
资源管理器6.
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp>
To comply with the Cascading Style Sheets, Level 1 (CSS1) box model,
Microsoft Internet Explorer 6 and later calculate the height of objects
differently when you use the !DOCTYPE declaration in your document to
switch on standards-compliant mode. This difference may affect the
value of the offsetHeight propety. When standards-compliant mode is
switched on, the height property specifies the distance between the top
and bottom edges of the bounding box that surrounds the object''s
content. When standards-compliant mode is not switched on, and with
earlier versions of Internet Explorer, the height property also
includes the border and padding belts that surround the object''s
bounding box. For more information, see CSS Enhancements in Internet
Explorer 6.
此外必备表位于：
< http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp>
您可能会注意到，互联网如果正确声明
，Explorer 6.x确实尊重DTD严格。您可能已经注意到（在您自己的
体验中）DTD Strict是您永远不想使用的东西。
您自己的自由意志。 ;-)）
讨论主题 - 如果确实其他浏览器的行为符合预期，那么
DTD Strict - 可以随后被折射为：谁确实以
标准行事，谁在吐痰DTD？ （虽然它实际上在CSS
域中）。
Also must-have tables are located at:
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp>
As you may notice, Internet Explorer 6.x indeed respects DTD Strict if
properly declared. You may also already noticed (on your own
experience) that DTD Strict is something you would never want to use by
your own free will. ;-))
The discussion topic - if indeed other browsers behave as expected in
DTD Strict - could be then refrased to: "who is indeed acting by
standards and who is spitting on DTD?" (though it''s actually in the CSS
domain).
VK写道：
< http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp>
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp>
像往常一样，你的帖子什么都没有和我写的任何事情有关。
我非常熟悉盒子模型问题和doctype切换。
我不看宽度或高度，我我正在查看offsetLeft / Top
的房产。
在发布之前先想想。
-
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
这篇关于当指定width：时，在IE中使用borderLeft错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
