Html IE6 + IE7 CSS 溢出问题：隐藏；- 位置：相对；组合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2403011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo
提问by googletorp
So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. I can't figure out why, but for some reason I can't hide the non active slides with overflow: hidden; I've tried tweaking the css back and forth, but haven't been able to figure out what's causing the problem.
所以我为主页创建了一个滑块，它使用 jQuery 滑动一些带有标题和预告文本的图像。一切正常，我去检查 IE，发现 IE 6 和 7 完全杀死了我的滑块 css。我不知道为什么，但由于某种原因，我不能用 overflow: hidden; 隐藏非活动幻灯片。我试过来回调整 css，但无法找出导致问题的原因。
I've recreated the problem in a more isolated html page.
我在一个更孤立的 html 页面中重新创建了这个问题。
<!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>
I've tracked down that it is the
我发现它是
ul {
position: relative;
}
on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.
在导致溢出的 ul 元素上： hidden 不起作用，但为什么会这样，我不知道。这也需要使用 ul 上的左属性使滑块 javascript 工作来滑动它。任何有关如何解决此问题的想法都非常受欢迎。
采纳答案by googletorp
This problem is apparently a known bugfor IE 6 + 7, which was fixed in IE8.
此问题显然是IE 6 + 7的已知错误，已在 IE8 中修复。
To avoid this, in this case you can replace:
为避免这种情况，在这种情况下，您可以替换：
ul {
left: -499px;
position: relative;
}
with:
和：
ul {
margin-left: -499px;
}
This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.
然而，这给我在信息框 div 上使用的背景带来了一些问题，但我无法通过一些样式技巧解决。
回答by Niels
It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.
这是 IE6 和 IE7 中的一个众所周知的错误。要解决它，您需要添加 position:relative 到容器。由于在您的情况下 body 是容器，我建议您直接在 body 下添加一个 div 并给它 position:relative。它应该可以解决您的问题。
