IE6 + IE7 CSS问题与overflow：hidden; - position：relative;组合 [英] IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo
问题描述
所以我为一个主页创建了一个滑块，使用jQuery来滑动一些带有标题和前导文字的图片。一切工作正常，我去检查IE，发现IE 6和7完全杀死了我的滑块css。我不知道为什么，但由于某种原因，我不能隐藏非活动幻灯片与overflow：hidden;我已经尝试来回调整css，但是没能找出导致问题的原因。
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.
我已经在更孤立的html page。
I've recreated the problem in a more isolated html page.
<!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元素上导致溢出：hidden不工作，为什么是这样，我不知道。此外，这是需要使滑块javascript工作使用左的属性上的ul滑动它。
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.
推荐答案
这个问题显然是 IE 6 + 7的已知错误，已在IE8中修复。
This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.
为避免这种情况，在这种情况下，您可以替换：
To avoid this, in this case you can replace:
ul {
left: -499px;
position: relative;
}
与：
ul {
margin-left: -499px;
}
然而这给了我在infobox div上使用的背景的一些问题，没有什么我不能用一些风格的黑客解决。
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.
这篇关于IE6 + IE7 CSS问题与overflow：hidden; - position：relative;组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
