解决IE6下CSS中overflow: hidden问题
在制作简单的图片幻灯jQuery时,我遇到了一个问题,CSS代码中overflow: hidden
在FireFox,google 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 真是太糟糕了。但现在还是有不少人在用它,所以一些浏览器兼容问题还是要解决的。
相关阅读: