goo*_*orp 64 html css overflow internet-explorer-7 internet-explorer-6
所以我为主页创建了一个滑块,使用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工作以滑动它.关于如何解决这个问题的任何想法都是最受欢迎的.
小智 182
这是IE6和IE7中众所周知的错误.要解决它,您需要添加位置:相对于容器.因为在你的情况下,身体是容器,我建议你直接在身体下面添加一个div并给它位置:relative.它应该解决你的问题.
goo*_*orp 25
这个问题显然是 IE 6 + 7 的已知错误,已在IE8中修复.
为避免这种情况,在这种情况下,您可以替换:
ul {
left: -499px;
position: relative;
}
有:
ul {
margin-left: -499px;
}
然而,这给我在信息框div上使用的背景带来了一些问题,但是没有什么我用一些风格黑客无法解决.
| 归档时间： |
|
| 查看次数： |
72335 次 |
| 最近记录： |