IE6 と IE7 で「overflow: hidden」が「position:relative」で動作しないのはなぜですか?-CSSチュートリアル-php.cn

IE6 と IE7 で「overflow: hidden」が「position:relative」で動作しないのはなぜですか?

Susan Sarandon

リリース： 2024-11-02 15:42:30

オリジナル

272 人が閲覧しました

Why Doesn't `overflow: hidden` Work with `position: relative` in IE6 and IE7?

IE6 および IE7 CSS 「overflow: hidden」および「position:relative」に関する問題

この問題は、非表示を非表示にしようとすると発生します。「overflow: hidden」を使用してスライダー内のアクティブなスライドを表示します。 IE6 および IE7 では、この CSS プロパティは、「position:relative」が適用された要素に対して機能しません。

次の分離された HTML 構造を考えてみましょう:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 900px;
    }

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

    li {
      display: block;
      float: left;
    }

    .item-list {
      overflow: hidden;
      width: 499px;
    }
  </style>
</head>
<body>
  <div class="item-list">
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</body>
</html></code>

ログイン後にコピー

目的は、非表示を非表示にすることです。 -「item-list」div で「overflow: hidden」を使用するアクティブなスライド。ただし、IE6 および IE7 では、「ul」に「position:relative」スタイルが適用されているため、これは失敗します。

解決策は、問題の要素のコンテナに「position:relative」を追加することです。この場合、「body」はコンテナなので、その直下に「div」を追加し、その位置を「相対」に設定すると問題は解決します。

以上がIE6 と IE7 で「overflow: hidden」が「position:relative」で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。