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上使用的背景带来了一些问题，但没有什么我用一些风格的黑客解决不了的。
