当前位置：首页 → 问答吧 → IE6下的relative定位的奇怪问题，大家来看看是不是bug

IE6下的relative定位的奇怪问题，大家来看看是不是bug

时间：2009-04-15

来源：互联网

relative定位是以元素原来位置作为定位参考，不像absolute定位是以外部第一个设了relative属性的元素作为定位参考。但大家看一个这个例子：
#main里面没设position属性，只是在其父容器#root设了一个position: relative
#left包含在#main里面，其position: relative属性应该以其原来的位置作为参考，但在IE6里，却以#main的父元素#root来参考了，就因为#root元素设置了position: relative？可这又不是absolute定位要参考外部元素的relative啊？

甚至：在IE6下，只要窗口大小改变，#left就会消失！要重新刷新才会出来

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IE6的relative</title> <style type="text/css"> #root { position: relative; } #main { margin: 0 auto; width: 600px; background: #eee; overflow:hidden; border:1px black solid; } #left { float: left; width: 200px; height:500px; background:blue; position: relative; left:10px; } #inbox { width: 100px; height: 100px; background: #f00; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div id="root"> <div id="main"> <div id="left"> <div id="inbox"> ddd</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这是IE6的bug吗？有参考的帖子吗？

作者: JOVE2 发布时间: 2009-04-15

需要给left的父级main也加一个position:relative;

作者: ONEBOYS 发布时间: 2009-04-15

引用:

原帖由 ONEBOYS 于 2009-4-15 12:35 发表
需要给left的父级main也加一个position:relative;

为什么不指定的情况下IE6就不行呢？relative定位在IE6下需要参考父元素的relative吗？

作者: JOVE2 发布时间: 2009-04-15

具体。。。还不怎么清楚。
本来不加position:relative应该也没事的，跟那个margin:0 auto应该有关系。

和这个问题类似：http://bbs.blueidea.com/viewthread.php?tid=2918577

作者: ONEBOYS 发布时间: 2009-04-15

引用:

原帖由 JOVE2 于 2009-4-15 11:42 发表
absolute定位是以外部第一个设了relative属性的元素作为定位参考

这句话还是有点问题。确切地说，是以最近的具有“定位属性”的祖先元素作为定位容器。“定位属性”可以是相对定位、绝对定位或固定定位。

另外你遇到的问题是 IE6 的 bug，很多教材上都会提到的。
这时需要触发 #main 的 hasLayout，或者需要显示地声明其尺寸。你可以试一下。

作者: birdstudio 发布时间: 2009-04-15

IE6还真是难伺候，很多莫名其妙的bug要找半天才知道原因

作者: JOVE2 发布时间: 2009-04-16

触发 #main 的 hasLayout，也定义了它的大小，还是那样啊？

作者: xiaoqiaoqiao 发布时间: 2009-04-16

不好意思，看错你的问题。我再看看。

作者: birdstudio 发布时间: 2009-04-16

看明白了，给 main 加一个相对定位就好了。呵呵，就是 2 楼的方法。

或者把 root 的相对定位去掉也可以。当然，我估计 root 的相对定位另有它用，不能去掉。

应该是 Bug。

姑且这样理解：main 设置了 {margin: 0 auto;}，其水平位置由 body 的宽度来决定，也就是说它没有确定的水平位置。貌似在这种情况下，IE6 无法获取其水平位置以供内部元素作为定位参照（并且错误地获取了相对定位的 root 水平位置），而此时设置相对定位可以让 IE6 重新计算并确定其水平位置，内部元素也就可以正确布局了。

作者: birdstudio 发布时间: 2009-04-16

引用:

原帖由 birdstudio 于 2009-4-16 12:29 发表
看明白了，给 main 加一个相对定位就好了。呵呵，就是 2 楼的方法。

或者把 root 的相对定位去掉也可以。当然，我估计 root 的相对定位另有它用，不能去掉。

应该是 Bug。

姑且这样理解：main 设置了 { ...

main就算不设置根据body宽度自动调节的auto，而设置成固定的像素，同样会出现这个bug～IE6估计对relative的理解和absolute一样了：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IE6的relative</title> <style type="text/css"> #root { position: relative; } #main { /*margin: 0 auto;*/ margin-left:300px; width: 600px; background: #eee; overflow:hidden; border:1px black solid; /*position:relative; /*必须加上，否则会引起IE6定位错误*/ } #left { float: left; width: 200px; height:500px; background:blue; position: relative; left:10px; } #inbox { width: 100px; height: 100px; background: #f00; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div id="root"> <div id="main"> <div id="left"> <div id="inbox"> ddd</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: JOVE2 发布时间: 2009-04-17

去掉 main 的高度，IE6 的表现貌似又有点靠谱了。这么说跟 hasLayout 也有关系了。

呵呵，实在无法解释。

作者: birdstudio 发布时间: 2009-04-17

希望IE6早些被淘汰，否则现在有很多的时间都浪费在IE6的除错上，特别是用了png之后，痛苦加倍

作者: JOVE2 发布时间: 2009-04-18

真的恨死IE6了......大把大吧的bug要除·····

作者: venos 发布时间: 2009-06-03

我主测IE6，基本没啥问题

作者: redsky1987 发布时间: 2009-06-03

提醒:最后回贴距现在 694 天，请不要无意义回复