当前位置：首页 → 问答吧 → IE6定位盒模型的偏差问题

IE6定位盒模型的偏差问题

时间：2011-11-09

来源：互联网

文章来源：我爱猫猫技术博客
地址：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

作者: outwang 发布时间: 2011-11-09

怎么都没有人给我评论呢？

作者: outwang 发布时间: 2011-11-09

IE6定位盒模型的偏差问题并不止这么一个地方
你只说了其中的一点

作者: a87345293 发布时间: 2011-11-09

还有什么地方呢？？请多多指教啊！

作者: outwang 发布时间: 2011-11-09