IE6/7绝对定位元素神秘消失事件!
- 发布在 也说技术
- 2010, 九月 10
最近在用Wordpress做一款类企业站的主题,作主题当然要研究一下Wordpress下的函数使用,但这并不是最难的,最难的是CSS的跨浏览器兼容问题。这不,在修改主题Head.php时,老饕就遭遇了IE下堪称灵异事件的绝对定位元素神秘消失!
IE6/7下的表现
火狐的表现
我们在进行网页布局设计的时候,经常会根据需要设置相对定位,但是有时就是发现,设置的绝对定位元素,突然从IE浏览器下消失了,然而火狐、Chrome、IE8等浏览器均可以正常显示。尝试对绝对定位元素进行清除浮动操作,IE下能显示,但是出现了莫名的留白,火狐下正常显示。至少这个现象表明,绝对定位元素在IE6下神秘消失对相邻元素的浮动定位有关。
折腾了许久还是没有搞定,于是向Google大师请教,终于找到解决方案。
高人有这样的解释:
1、当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;
2、当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;
3、当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示;
4、当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;
解决办法:
要解决这个BUG的方法也很简单,让绝对定位层不挨着浮动层放置就好了,当然,还有一个更偷懒的办法,即在绝对定位元素和其他元素之间加一个空白的<div></div>标签,这样就把它们简单的隔开了。
好了,问题解决!欢呼!!!
PS:Google博客分享大赛如火如荼的进行中,路过的朋友们记得帮我投个票啊~~
征文题目:安卓得的十八般武艺宝典 ,东南大学
投票地址:http://www.google.com/intl/zh-CN/daxue/blog2010/index.html#tab1
(可能比较难找,用Ctrl+F 大法搜索“安卓得的十八般武艺宝典”或 “东南大学”均可)
小弟从头到脚感谢顶贴的,投票的,还有路过的,酱油的…
让IE6去死!!
[点击回复]
老饕 回复:
九月 12th, 2010 at 9:57 上午
@FORECE, 我们共同的心声啊!
[点击回复]
兼容性这个是比较费时间的!
[点击回复]
珍惜生命,远离IE
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:03 上午
@lovee, 我希望这是所有网民的心声~~还有远离360
[点击回复]
ie的bug层出不穷啊
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:04 上午
@万戈, IE9就完全搞定了~~唉,中国还有一堆IE内核的浏览器在起哄~
[点击回复]
小白路过
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:05 上午
@abx, 大家都曾经是小白~呵呵
[点击回复]
高深莫测,顶一个先。俺不懂滴~~
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:09 上午
@SOHO一族, 这种事之前我也没有碰到过~~对IE的佩服更加是“五体投地”~
[点击回复]
最烦就是这CSS的东西了
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:11 上午
@柳城, 特别是IE6、7下的css~
[点击回复]
[点击回复]
沙发
[点击回复]
老饕 回复:
九月 12th, 2010 at 10:22 上午
@阿达, 佩服佩服!呵呵
[点击回复]