J'ai donc créé un curseur pour une page d'accueil, qui se glisse quelques images avec un titre et un teaser de texte à l'aide de jQuery. Tout fonctionne bien, et je suis allé vérifier IE et a constaté que IE 6 et 7 tue mon slider css complètement. Je ne peux pas comprendre pourquoi, mais pour une raison que je ne peut pas le cacher non actif diapositives avec overflow: hidden; j'ai essayé de bidouiller le css et en arrière, mais je n'ai pas été en mesure de comprendre ce qui est à l'origine du problème.
J'ai recréé le problème le plus isolé de la page 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>
J'ai traqué que c'est la
ul {
position: relative;
}
sur l'élément ul qui est à l'origine du débordement: caché de ne pas travailler, mais pourquoi, je ne sais pas. Aussi ce qui est nécessaire pour rendre le curseur de travail javascript à l'aide de l'attribut left sur l'ul pour la faire glisser. Toutes les idées sur la façon dont vous pouvez résoudre ce problème est la plupart de bienvenue.
