Maison > Article > interface Web > IE6定位盒模型的偏差问题_html/css_WEB-ITnose
文章来源:我爱猫猫技术博客
地址: 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声明等一切元素)
怎么都没有人给我评论呢?
IE6定位盒模型的偏差问题并不止这么一个地方
你只说了其中的一点
还有什么地方呢??请多多指教啊!
我知道还有一个区别就是,当以个
包含当内部层宽度大于外部层宽度时候,在ie里会撑大外部层,别的浏览器则是裁切掉溢出的部分,可以通过内外层加个背景看效果还有最大的一个区别就是ie6在非标准模式下,width=margin+border+padding+widthIn