IE6 + IE7 CSS问题溢出:隐藏；-位置:相对；组合
IE6 + IE7 CSS问题溢出:隐藏；-位置:相对；组合
提问于 2010-03-09 00:55:26
所以我已经为主页创建了一个滑块，它使用jQuery滑动一些带有标题和摘要文本的图像。一切正常，我去检查IE，发现IE6和IE7完全杀死了我的滑块css。我不知道为什么，但出于某种原因，我不能隐藏不活动的幻灯片与overflow:隐藏；我试图来回调整css，但没有能够找出是什么导致的问题。
我已经在一个更孤立的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>我已经追踪到这是
ul {
position: relative;
}在导致溢出的ul元素上:隐藏不起作用，但为什么会这样，我不知道。此外，这也需要使用ul上的left属性来滑动滑块javascript。任何关于如何解决这个问题的想法都是非常受欢迎的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-03-09 17:22:52
此问题显然是IE 6+ 7的a known bug问题，已在IE8中修复。
为了避免这种情况，在这种情况下，您可以替换：
ul {
left: -499px;
position: relative;
}通过以下方式：
ul {
margin-left: -499px;
}然而，这给我在infobox div上使用的背景带来了一些问题，但没有什么是我不能用一些风格hack解决的。
Stack Overflow用户
发布于 2010-04-16 22:28:13
这是IE6和IE7中的一个众所周知的错误。要解决这个问题，您需要添加position:相对于容器。因为在你的例子中，body就是容器，我建议你直接在body下面添加一个div，并赋予它position:relative。它应该能解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2403011
复制相关文章
相似问题
腾讯云开发者
