IE6/7绝对定位元素神秘消失事件!

最近在用Wordpress做一款类企业站的主题,作主题当然要研究一下Wordpress下的函数使用,但这并不是最难的,最难的是CSS的跨浏览器兼容问题。这不,在修改主题Head.php时,老饕就遭遇了IE下堪称灵异事件的绝对定位元素神秘消失!

导航栏1

IE6/7下的表现

导航栏1_firefox

火狐的表现

我们在进行网页布局设计的时候,经常会根据需要设置相对定位,但是有时就是发现,设置的绝对定位元素,突然从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>标签,这样就把它们简单的隔开了。

好了,问题解决!欢呼!!!

导航栏1_IE

PS:Google博客分享大赛如火如荼的进行中,路过的朋友们记得帮我投个票啊~~

征文题目:安卓得的十八般武艺宝典 ,东南大学
投票地址:http://www.google.com/intl/zh-CN/daxue/blog2010/index.html#tab1

(可能比较难找,用Ctrl+F 大法搜索“安卓得的十八般武艺宝典”或 “东南大学”均可)
小弟从头到脚感谢顶贴的,投票的,还有路过的,酱油的…



分享到:
版权申明

本站所有文章,除特别标明外,皆为原创。如需转载,请注明出处:

转载自:i 飞扬 分享精彩!
原文链接:IE6/7绝对定位元素神秘消失事件!

您的支持是我最大的动力!

  1. 让IE6去死!!

    [点击回复]

    老饕 回复:

    @FORECE, 我们共同的心声啊!

    [点击回复]

  2. 兼容性这个是比较费时间的!

    [点击回复]

  3. 珍惜生命,远离IE :lol:

    [点击回复]

    老饕 回复:

    @lovee, 我希望这是所有网民的心声~~还有远离360

    [点击回复]

  4. ie的bug层出不穷啊

    [点击回复]

    老饕 回复:

    @万戈, IE9就完全搞定了~~唉,中国还有一堆IE内核的浏览器在起哄~

    [点击回复]

  5. 小白路过

    [点击回复]

    老饕 回复:

    @abx, 大家都曾经是小白~呵呵

    [点击回复]

  6. 高深莫测,顶一个先。俺不懂滴~~

    [点击回复]

    老饕 回复:

    @SOHO一族, 这种事之前我也没有碰到过~~对IE的佩服更加是“五体投地”~

    [点击回复]

  7. 最烦就是这CSS的东西了 :mrgreen:

    [点击回复]

    老饕 回复:

    @柳城, 特别是IE6、7下的css~

    [点击回复]

  8. :grin: 学习不解释..

    [点击回复]

  9. 沙发

    [点击回复]

    老饕 回复:

    @阿达, 佩服佩服!呵呵

    [点击回复]

  1. 没有通告


无觅相关文章插件,快速提升流量