IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击
因此,我为主页创建了一个滑块,该滑块使用jQuery滑动了一些带有标题和预告文本的图像。一切正常,我去检查IE,发现IE 6和IE
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工作。关于如何解决此问题的任何想法都非常欢迎。
-
这个问题显然是IE 6 + 7 的已知错误,已在IE8中修复。
为避免这种情况,在这种情况下,您可以替换:
ul { left: -499px; position: relative; }
与:
ul { margin-left: -499px; }
但是,这给我在infobox div上使用的背景带来了一些问题,但是对于一些样式技巧我无法解决。
-
IE6 + IE7 CSS问题,溢出:隐藏;-职位:相对;连击
2021-02-02 关注 0 浏览91 1答案
-
IE6(IE7)上的JSON
2021-01-31 关注 0 浏览82 1答案
-
getElementsByClassName()在旧的Internet Explorer(如IE6,IE7,IE8)中不起作用
2021-02-02 关注 0 浏览120 1答案
-
IE7和IE6中的jQuery .ajax方法无法正常运行,但在Firefox中可以正常运行
2021-01-31 关注 0 浏览96 1答案
-
用CSS分别定义IE6、7、8的width属性,使其在IE6下的值为10p...
2022-03-03 关注 0 浏览49 1答案
-
IE6悬停问题
2021-02-02 关注 0 浏览86 1答案
-
IE7和CSS表格单元属性
2021-02-02 关注 0 浏览92 1答案
-
IE7 CSS继承不起作用
2021-02-02 关注 0 浏览69 1答案
-
如何使用有效的CSS定位IE7和IE8?
2021-02-02 关注 0 浏览73 1答案
-
IE7 Z索引分层问题
2021-02-02 关注 0 浏览95 1答案