web-dev-qa-db-fra.com

Problème CSS IE6 + IE7 avec débordement: caché; - position: relative; combo

J'ai donc créé un curseur pour une page d'accueil, qui fait glisser des images avec un titre et un texte d'accroche en utilisant jQuery. Tout fonctionne bien, et je suis allé vérifier IE et j'ai constaté que IE 6 et 7 tue complètement mon curseur css. Je ne peux pas comprendre pourquoi, mais pour une raison quelconque, je ne peux pas masquer les diapositives non actives avec débordement: caché; j'ai essayé de modifier le CSS d'avant en arrière, mais je n'ai pas été en mesure de déterminer la cause du problème.

J'ai recréé le problème dans une page html plus isolée.

<!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 découvert que c'est la

ul {
  position: relative;
}

sur l'élément ul qui cause le débordement: caché pour ne pas fonctionner, mais pourquoi c'est, je ne sais pas. Cela est également nécessaire pour faire fonctionner le curseur javascript en utilisant l'attribut gauche sur ul pour le faire glisser. Toutes les idées sur la façon de résoudre ce problème sont les bienvenues.

htmlcssinternet-explorer-6internet-explorer-7overflow
64
googletorp

Ce problème est apparemment n bug conn pour IE 6 + 7, qui a été corrigé dans IE8.

Pour éviter cela, dans ce cas, vous pouvez remplacer:

ul {
    left: -499px;
    position: relative;
  }

avec:

ul {
    margin-left: -499px;
  }

Cela a cependant donné quelques problèmes avec l'arrière-plan que j'ai utilisé sur l'infobox div, mais rien que je n'ai pas pu résoudre avec quelques hacks de style.

25
googletorp

Il s'agit d'un bogue bien connu dans IE6 et IE7. Pour le résoudre, vous devez ajouter une position: par rapport au conteneur. Étant donné que dans votre cas, le corps est le conteneur, je vous suggère d'ajouter un div directement sous le corps et de lui donner la position: relative. Cela devrait résoudre votre problème.

182
Niels