宝宝健康成长网首页刘易桉刘玥健康成长 林林悦悦微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 网络学习 >> 解决IE6下CSS中overflow: hidden问题

解决IE6下CSS中overflow: hidden问题

制作简单的图片幻灯jQuery时,我遇到了一个问题,CSS代码中overflow: hiddenFireFoxgoogle chrome及IE7、IE8等浏览器下都正常显示,可在Internet Explorer 6下excessive content隐藏失败,无论是text还是images。这个问题困扰了我好久,终于找到了解决办法,原来问题出在 Position:Relative 语句上。

如例:我们需要添加类似代码

<div id="slide_frame">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>

赋予该div如下CSS:

#slide_frame { width:300px; overflow:hidden; }
#slide_frame ul { list-style-type:none; width:600px; position:relative; }
#slide_frame li { float:left; padding:0 5px; }

然后,问题来了,IE6下无论是text还是images,excessive content仍然可见。

解决办法:<ul> 赋予了 positioned: relative,给它的上一层也添加position:relative 即变为:

#slide_frame { width:300px; overflow:hidden; position:relative; }
#slide_frame ul { list-style-type:none; width:600px; position:relative; }
#slide_frame li { float:left; padding:0 5px; }

IE 6 真是太糟糕了。但现在还是有不少人在用它,所以一些浏览器兼容问题还是要解决的。

敬请留言当前共有 9 条评论

  1. 天缘博客 说道:

    这个东西,每次都要整上半天,国际没一个统一的标准,谁想怎么做就怎么做。

  2. Dave 说道:

    谢谢了哥们,问题解决了,我的是子层加了relative结果就溢出了,我也发现是relative的问题,我还以为父层如果是relative子层只能是absolute,真无奈了,收藏了

  3. 二手科学家 说道:

    @Dave 不客气哇!欢迎来访

  4. [...] 解决IE6下CSS中overflow: hidden问题 | 百奥博 [...]

  5. pengkai 说道:

    正解。 郁闷了半天。

  6. 亿品元素 说道:

    遇到过这样郁闷的问题

  7. 二手科学家 说道:

    ie浏览器让人郁闷的事老多了

  8. d 说道:

    不错,解决了我的问题 多谢

  9. 后起之秀 说道:

    谢啦~帮我解决了~ 可是出这个问题的原因不知道博主清楚不~

发表评论

^留言没头像?教你设置头像!
我的应用 Follow@cnbabyup 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错