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

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

DDD

リリース： 2024-11-02 14:06:03

オリジナル

389 人が閲覧しました

Why Does `overflow: hidden` Not Work with `position: relative` in IE6 and IE7?

IE6 および IE7 でのオーバーフロー: 非表示および位置: 相対的な CSS 問題の解決

Internet Explorer 6 および 7 でオーバーフロー: 非表示と位置に関連する CSS 問題が発生した場合:relative では、意図した機能を妨げる特定の原因が存在することがよくあります。

提供されたコードスニペットでは、問題は ul 要素に適用されるposition:relativeプロパティに起因する可能性があります。このプロパティはスライダーの機能に不可欠ですが、item-list div の overflow: hidden プロパティを誤って中断してしまいます。

これを解決するには、次のように、body 要素を基準にしてposition: を追加します。以下の修正されたコード:

<code class="html"><body>
  <div style="position:relative;">  <!-- New div with position:relative -->
    <div class="column-1">
      <div class="item-list clearfix">
        <!-- Rest of the code remains the same --></code>

ログイン後にコピー

この追加により、position:相対的な新しいコンテナが作成され、ul 要素の位置が効果的に分離され、item-list div の overflow:hidden プロパティが期待どおりに動作できるようになります。その結果、非アクティブなスライドは正常に非表示になります。

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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

IE6 および IE7 でのオーバーフロー: 非表示および位置: 相対的な CSS 問題の解決