web-dev-qa-db-ja.com

IE6 + IE7 CSSのオーバーフローの問題：隠された; -位置：相対;コンボ

そこで、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要素について：動作しないように隠されていますが、なぜそうなのか、わかりません。また、ulのleft属性を使用してスライダーのJavaScriptを機能させるために必要です。これを修正する方法についてのアイデアは大歓迎です。

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

この問題は明らかに 既知のバグ for IE 6 + 7、IE8で修正されました。

これを回避するには、この場合、次のものを交換できます。

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

で：

ul {
    margin-left: -499px;
  }

しかし、これはインフォボックスdivで使用した背景にいくつかの問題をもたらしましたが、いくつかのスタイルのハックでは解決できませんでした。

25
googletorp

IE6およびIE7の既知のバグです。それを解決するには、position：relativeをコンテナに追加する必要があります。あなたの場合、ボディはコンテナなので、divをボディのすぐ下に追加し、position：relativeにすることをお勧めします。問題を解決するはずです。

182
Niels