IE6 + IE7 CSS проблема с переполнением: скрыто; - положение: относительное; комбо
Поэтому я создал слайдер для домашней страницы, на котором с помощью jQuery слайдируются некоторые изображения с заголовком и текстом тизера. Все работает отлично, и я пошел проверить IE и обнаружил, что IE 6 и 7 полностью убивают мой ползунок css. Я не могу понять, почему, но по какой-то причине я не могу скрыть неактивные слайды с переполнением: hidden; Я пытался настроить 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, который вызывает переполнение: скрытый, чтобы не работать, но почему это, я не знаю. Также это необходимо для того, чтобы заставить javascript слайдера работать, используя левый атрибут ul для его перемещения. Любые идеи относительно того, как вы можете это исправить, приветствуются.