热搜:NVER node 开发 php

IE6定位盒模型的偏差问题_html/css_WEB-ITnose

2024-11-27 22:30:01
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中的解析是偏离了父盒子的左边框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的偏差。

nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

而声明了DTD则不会出现这个问题:

nbsp;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定位盒模型的偏差问题并不止这么一个地方
你只说了其中的一点

还有什么地方呢??请多多指教啊!

我知道还有一个区别就是,当以个

包含当内部层宽度大于外部层宽度时候,在ie里会撑大外部层,别的浏览器则是裁切掉溢出的部分,可以通过内外层加个背景看效果

还有最大的一个区别就是ie6在非标准模式下,width=margin+border+padding+widthIn