IE6 + IE7溢出的CSS问题:隐藏; – 职位:相对; 二合一

所以我为主页创build了一个滑块,用jQuery将一些图像与标题和传情文本一起滑动。 一切正常,我去检查IE浏览器,发现IE 6和7杀死我的滑块CSS完全。 我不明白为什么,但由于某种原因,我不能隐藏非活动幻灯片溢出:隐藏; 我试着来callback整CSS,但一直无法找出是什么原因造成的问题。

我已经在一个更孤立的HTML页面中重新创build了这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr"> <head> <style> body { width: 900px; } .column-1 { width: 500px; float: left; } .column-2 { width: 200px; float: left; } .column-3 { width: 200px; float: left; } ul { width: 2000px; left: -499px; position: relative; } li { list-style: none; display: block; float: left; } .item-list { overflow: hidden; width: 499px; } </style> </head> <body> <div class="column-1"> <div class="item-list clearfix"> <ul> <li class="first"> <div class="node-slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 1</h4> <p>Teaser 1</p> </div> </div> </li> <li> <div class="slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 2</h4> <p>Teaser 2</p> </div> </div> </li> <li class="last"> <div class="slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 3</h4> <p>Teaser 3</p> </div> </div> </li> </ul> </div> </div> <div class="column-2"> ... </div> <div class="column-3"> ... </div> </body> </html> 

我已经查明,这是

 ul { position: relative; } 

对导致溢出的ul元素:隐藏不起作用,但为什么这是,我不知道。 此外,这是需要使滑块JavaScript工作使用左侧的属性在UL滑动它。 任何想法如何解决这个问题是非常受欢迎的。

这是IE6和IE7中的一个众所周知的错误。 要解决它,你需要添加位置:相对于容器。 因为在你的情况下身体是容器,我build议你直接在身体下面添加一个div,并给它的位置:相对。 它应该解决你的问题。

这个问题显然是 IE 6 + 7的一个已知的bug ,在IE8中已经修复。

为了避免这种情况,在这种情况下,您可以replace:

 ul { left: -499px; position: relative; } 

有:

 ul { margin-left: -499px; } 

然而这给我在信息框div上使用的背景带来了一些问题,但没有什么我用一些风格的黑客解决不了的。