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

Question

Mar 08, 2010, 05:55 PM

internet-explorer-7 css html internet-explorer-6 overflow

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 den IE überprüft und festgestellt, dass IE 6 und 7 meine Slider-CSS vollständig töten. Ich kann nicht herausfinden warum, aber aus irgendeinem Grund kann ich die nicht aktiven Folien mit Überlauf nicht 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.