再度被IE恶心!绝对定位元素莫名消失bug

这几天在搞公司的新站,首页终于大功告成,不想在进行浏览器兼容性测试的时候,遇上了一个十分郁闷的问题。

为了美观,给网站的logo加了个透明的flash效果,为了不影响其他的元素,给这个flash的容器来了个绝对定位,没想到问题就出现了:所有版本的IE浏览器(包括本人正在使用的IE9 rc版本)里面,都找不到这个绝对定位的容器。这个flash失踪了!

一开始,感觉可能是flash的代码可能不兼容。因为本人一贯使用最精简的代码来插入flash,如下:

<embed src=”xx.swf” type=”application/x-shockwave-flash”  pluginspage=”http://www.macromedia.com/go/getflashplayer” />

也许是flash代码出现了问题,不过冷静一想,这么长时间都没有出过问题,况且不可能影响如此广泛。通过IE中的开发者工具,检查代码。检查中,发现去掉该绝对定位元素后的任意属性后,再加上,该元素就会奇迹般的重新显示,看来这个问题实在是很诡异,应该不是CSS的问题。

于是google一下,发现了问题的根源:在IE7(从我的测试中发现,不仅仅是IE7)中,根据HTML代码编写的顺序,或者float元素的宽度或hasLayout属性,绝对定位的元素可能会消失。(原文见:http://apps.hi.baidu.com/share/detail/24865682 IE中绝对定位元素(position:absolute;)莫名消失问题)正好跟我的这个问题类似。我的logo旁边加了其他的小工具按钮的div,并进行了浮动。看来这就是问题的症结所在了。因此在它们之间插入一个空div,或把任何一个再包一层div都可以解决问题。问题的原因好像和IE的hasLayout 属性有关。于是试着将这个绝对定位的div调了一下位置,问题解决了。

恶心的IE,到了IE9还没有解决这个bug!!! 刚刚溜群发现了一幅对联,感觉用到这里很贴切:

上联:为需求而生,为用户而死,为浏览器奋斗一辈子!
下联:吃CSS亏,上JS的当,最后死在兼容上!
横批:前端人生

Published by

小车

网站技术工人