最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

IE6定位盒模型的偏差问题_html/css

来源:懂视网 责编:小采 时间:2020-11-27 15:51:46
文档

IE6定位盒模型的偏差问题_html/css

IE6定位盒模型的偏差问题_html/css_WEB-ITnose:文章来源:我爱猫猫技术博客 地址: http://www.52maomao.info 关于IE6盒模型与其他浏览器是否不同,我不敢轻易的下结论,但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。 例如我们今天要讲到的IE6定位盒模型的偏差问题。 CS
推荐度:
导读IE6定位盒模型的偏差问题_html/css_WEB-ITnose:文章来源:我爱猫猫技术博客 地址: http://www.52maomao.info 关于IE6盒模型与其他浏览器是否不同,我不敢轻易的下结论,但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。 例如我们今天要讲到的IE6定位盒模型的偏差问题。 CS

文章来源:我爱猫猫技术博客
地址: 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的偏差。



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



如果我们使用的语言是XHTML1.0,那么不管我们是否声明DTD,在IE6以上的解析都是正确的。

原文地址: http://www.52maomao.info/ie6-positioning-box-model-of-deviation.html


回复讨论(解决方案)

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

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

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

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

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

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

IE6定位盒模型的偏差问题_html/css

IE6定位盒模型的偏差问题_html/css_WEB-ITnose:文章来源:我爱猫猫技术博客 地址: http://www.52maomao.info 关于IE6盒模型与其他浏览器是否不同,我不敢轻易的下结论,但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。 例如我们今天要讲到的IE6定位盒模型的偏差问题。 CS
推荐度:
标签: 定位 IE 定位的
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top