IE6 + IE7 CSS 溢出问题：隐藏； - 位置：相对；组合
Posted
技术标签:
【中文标题】IE6 + IE7 CSS 溢出问题：隐藏； - 位置：相对；组合【英文标题】：IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo 【发布时间】：2011-01-25 01:42:44 【问题描述】：所以我为主页创建了一个滑块，它使用 jQuery 滑动一些带有标题和预告文本的图像。一切正常，我去检查 IE，发现 IE 6 和 7 完全杀死了我的滑块 css。我不知道为什么，但由于某种原因，我无法使用溢出隐藏非活动幻灯片：隐藏；我尝试来回调整 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 工作以滑动它所必需的。任何关于如何解决此问题的想法都非常受欢迎。
【问题讨论】：
尝试将您的<head> 放在正确的位置...
@Jer 显然问题不是我的复制/粘贴缺陷。
【参考方案1】：
这是 IE6 和 IE7 中的一个众所周知的错误。要解决它，您需要添加位置：相对于容器。由于在您的情况下 body 是容器，我建议您直接在 body 下方添加一个 div 并给它位置：relative。它应该可以解决您的问题。
【讨论】：
拯救了我的一天！ ...我的意思是晚上） 很好的提示！花了我这么长时间才找到这个帖子！我讨厌 IE！ 我通过使用具有绝对位置的内联图像在 IE7 中使用此技术进行background-size: cover 复制。谢谢！【参考方案2】：
这个问题显然是 IE 6 + 7 的 a known bug，在 IE8 中已修复。
为避免这种情况，在这种情况下您可以替换：
ul
left: -499px;
position: relative;
与：
ul
margin-left: -499px;
然而，这给我在 infobox div 上使用的背景带来了一些问题，但没有什么是我无法通过一些样式 hack 解决的。
【讨论】：
同样的问题，将position:relative; 设置为ul 父级就可以了。非常感谢！以上是关于IE6 + IE7 CSS 溢出问题：隐藏； - 位置：相对；组合的主要内容，如果未能解决你的问题，请参考以下文章