wake-up-neo.com

IE6 + IE7 CSS-Problem mit Überlauf: versteckt; - Position: relativ; Combo

Deshalb habe ich einen Slider für eine Homepage erstellt, der mit jQuery einige Bilder mit Titel und Teasertext verschiebt. Alles funktioniert einwandfrei, und ich habe IE und festgestellt, dass IE 6 und 7 meine Slider-CSS vollständig tötet. Ich kann nicht herausfinden, warum, aber Aus irgendeinem Grund kann ich die nicht aktiven Folien nicht mit Überlauf verbergen: hidden. Ich habe versucht, das CSS vor und zurück zu ändern, konnte aber nicht herausfinden, was das Problem verursacht.

Ich habe das Problem in einer isolierten HTML-Seite nachgebildet.

<!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>

Ich habe herausgefunden, dass es das ist

ul {
  position: relative;
}

über das ul-Element, das den Überlauf verursacht: hidden funktioniert nicht, aber warum das so ist, weiß ich nicht. Dies ist auch erforderlich, damit der Schieberegler mit Javascript funktioniert. Verwenden Sie dazu das linke Attribut auf der ul. Ideen, wie Sie dies beheben können, sind sehr willkommen.

64
googletorp

Dieses Problem ist anscheinend ein bekannter Fehler für IE 6 + 7, der in IE8 behoben wurde.

Um dies zu vermeiden, können Sie in diesem Fall Folgendes ersetzen:

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

mit:

ul {
    margin-left: -499px;
  }

Dies gab jedoch einige Probleme mit dem Hintergrund, den ich für die Infobox Div verwendet habe, aber nichts, was ich mit ein paar Style-Hacks nicht lösen konnte.

25
googletorp

Es ist ein bekannter Fehler in IE6 und IE7. Um es zu lösen, müssen Sie Position hinzufügen: relativ zum Container. Da body in Ihrem Fall der Container ist, würde ich vorschlagen, dass Sie ein div direkt unter dem body hinzufügen und ihm die Position relative zuweisen. Es sollte Ihr Problem lösen.

182
Niels