Итак, я создал слайдер для домашней страницы, который слайд некоторых изображений с заголовком и текстом тизера, используя 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, чтобы сместить его. Любые идеи относительно того, как вы можете исправить это, очень приветствуются.
Эта проблема, по-видимому, известная ошибка для IE 6 + 7, которая была исправлена в IE8.
Чтобы этого избежать, в этом случае вы можете заменить:
ul {
left: -499px;
position: relative;
}
с:
ul {
margin-left: -499px;
}
Это, однако, дало некоторые проблемы с фоном, который я использовал в div инфобокса, но ничего не мог решить с помощью нескольких хакеров стиля.
Это хорошо известная ошибка в IE6 и IE7. Чтобы решить эту проблему, вам нужно добавить позицию: относительно контейнера. Поскольку в вашем корпусе находится контейнер, я предлагаю вам добавить div непосредственно под телом и дать ему положение: относительный. Он должен решить вашу проблему.