「overflow: hidden」を「position:relative」と組み合わせると、IE6 および IE7 で非アクティブなスライドを非表示にできないのはなぜですか?

Patricia Arquette
リリース: 2024-11-03 04:27:31
オリジナル
862 人が閲覧しました

Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?

IE6 IE7 CSS オーバーフローの問題: 非表示。 - 位置: 相対的。 Combo

この問題は、CSS プロパティのオーバーフロー: hidden を利用してスライダー内の非アクティブなスライドを非表示にしようとすると発生します。ただし、IE 6 および 7 では、このアプローチは失敗し、非アクティブなスライドが表示されたままになります。根本的な原因は、含まれる ul 要素の overflow: hidden とposition:relativeの組み合わせにあります。

この問題の既知の回避策は、コンテナ要素に対してposition:relativeを追加することです。指定された HTML 構造では、body タグがコンテナとして機能します。この問題を解決するには、本文の直下に div を追加し、相対位置を割り当てます。

<code class="html"><body>
  <div id="container">
    ...
  </div>
</body></code>
ログイン後にコピー

提供された CSS に次の行を追加します。

<code class="css">#container {
  position: relative;
}</code>
ログイン後にコピー

この変更により、この問題を解決し、オーバーフロー: 非表示の使用を有効にして、IE 6 および 7 で非アクティブなスライドを非表示にし、適切なスライダー機能を確保します。

以上が「overflow: hidden」を「position:relative」と組み合わせると、IE6 および IE7 で非アクティブなスライドを非表示にできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート