IE6定位盒模型的偏差有关问题
日期：2014-05-17 浏览次数：20625 次
IE6定位盒模型的偏差问题
文章来源：我爱猫猫技术博客
地址：http://www.52maomao.info
关于IE6盒模型与其他浏览器是否不同，我不敢轻易的下结论，但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。
例如我们今天要讲到的IE6定位盒模型的偏差问题。
CSS属性中的position:absolute;和position:relative;是两个经常被用来进行定位布局的属性。当我们在父级元素中使用了position:relative;将它设置为定位树之后，对子元素使用position:absolute;进行定位，并且通过top，left，right，bottom来进行子元素位置的设定。
有下面一种情况：我们为父级元素中使用position:relative;，并且添加一个padding:20px;，然后我们为子元素通过position:absolute;定位。
这时候IE6中就出现问题了。它并不是参照父元素的边缘区域进行定位的，而是参照了父元素的padding属性解析之后的边缘进行定位，其他的标准浏览器如：Firefox、Chrome等都是参照父元素的边缘进行定位的。
在CSS属性的介绍中，position:absolute;是参照上一级有定位属性的盒子的边缘区域进行定位，也就是说这里的IE6的解析是一个错误，或者说是一个BUG。
代码如下：
（这里省略了!DOCTYPE声明等一切元素）
<div style=”position:relative; padding:20px; border:1px solid #DDD;”>
<div style=”position:absolute; border:1px solid #000; top:0px; left:0px;”>喜欢你</div>
</div>
如果你用浏览器测试一下，可以很轻易地发现，“喜欢你”这个盒子在IE6中的解析是偏离了父盒子的左边框20px。
测试地址：http://www.52maomao.info/wp-content/themes/gbray/demo/ie6_bug_position.html
解决这个BUG的方法很简单，就是使用IE6特有的选择符（_）来重新定义子盒子的left。
代码如下：_left:-20px;
从上面这个实例，我们多多少少可以看出，IE6的盒模型和其他浏览器还是有所偏差的。
测试这个BUG的时候我发现一个问题，就是：如果我们使用的HTML语言是HTML4.01并且在没有声明DTD的时候，那么在所有的IE浏览器中，“喜欢你”这个盒子都会出现20px的偏差。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
而声明了DTD则不会出现这个问题：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/DTD/html4.01-strict.dtd”>
如果我们使用的语言是XHTML1.0，那么不管我们是否声明DTD，在IE6以上的解析都是正确的。
原文地址：http://www.52maomao.info/ie6-positioning-box-model-of-deviation.html
------解决方案--------------------
IE6定位盒模型的偏差问题并不止这么一个地方
你只说了其中的一点
文章来源：我爱猫猫技术博客
地址：http://www.52maomao.info
关于IE6盒模型与其他浏览器是否不同，我不敢轻易的下结论，但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。
例如我们今天要讲到的IE6定位盒模型的偏差问题。
CSS属性中的position:absolute;和position:relative;是两个经常被用来进行定位布局的属性。当我们在父级元素中使用了position:relative;将它设置为定位树之后，对子元素使用position:absolute;进行定位，并且通过top，left，right，bottom来进行子元素位置的设定。
有下面一种情况：我们为父级元素中使用position:relative;，并且添加一个padding:20px;，然后我们为子元素通过position:absolute;定位。
这时候IE6中就出现问题了。它并不是参照父元素的边缘区域进行定位的，而是参照了父元素的padding属性解析之后的边缘进行定位，其他的标准浏览器如：Firefox、Chrome等都是参照父元素的边缘进行定位的。
在CSS属性的介绍中，position:absolute;是参照上一级有定位属性的盒子的边缘区域进行定位，也就是说这里的IE6的解析是一个错误，或者说是一个BUG。
代码如下：
（这里省略了!DOCTYPE声明等一切元素）
<div style=”position:relative; padding:20px; border:1px solid #DDD;”>
<div style=”position:absolute; border:1px solid #000; top:0px; left:0px;”>喜欢你</div>
</div>
如果你用浏览器测试一下，可以很轻易地发现，“喜欢你”这个盒子在IE6中的解析是偏离了父盒子的左边框20px。
测试地址：http://www.52maomao.info/wp-content/themes/gbray/demo/ie6_bug_position.html
解决这个BUG的方法很简单，就是使用IE6特有的选择符（_）来重新定义子盒子的left。
代码如下：_left:-20px;
从上面这个实例，我们多多少少可以看出，IE6的盒模型和其他浏览器还是有所偏差的。
测试这个BUG的时候我发现一个问题，就是：如果我们使用的HTML语言是HTML4.01并且在没有声明DTD的时候，那么在所有的IE浏览器中，“喜欢你”这个盒子都会出现20px的偏差。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
而声明了DTD则不会出现这个问题：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/DTD/html4.01-strict.dtd”>
如果我们使用的语言是XHTML1.0，那么不管我们是否声明DTD，在IE6以上的解析都是正确的。
原文地址：http://www.52maomao.info/ie6-positioning-box-model-of-deviation.html
------解决方案--------------------
IE6定位盒模型的偏差问题并不止这么一个地方
你只说了其中的一点
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
