ホームページ > ウェブフロントエンド > CSSチュートリアル > オーバーフローが発生する理由: 非表示。位置: 相対での作業を停止します。 IE6とIE7では?

オーバーフローが発生する理由: 非表示。位置: 相対での作業を停止します。 IE6とIE7では?

DDD
リリース: 2024-11-03 17:52:02
オリジナル
692 人が閲覧しました

Why Does overflow: hidden; Stop Working with position: relative; in IE6 and IE7?

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

jQuery を利用して画像、それぞれのタイトル、ティーザーをナビゲートするホームページ スライダーを作成しようとした開発者は、不可解な問題に遭遇しました。スライダーは他のブラウザではシームレスに機能しましたが、IE6 と IE7 では、特に overflow: hidden; を使用して非アクティブなスライドを非表示にする点で誤動作しました。

問題のあるコードを特定するために、分離された HTML ページが細心の注意を払って再作成されました。

<code class="html"><style>
  ul {
    position: relative;
  }

  .item-list {
    overflow: hidden;
    width: 499px;
  }
</style></code>
ログイン後にコピー

徹底した調査の結果、犯人は「立場:親戚」であることが判明しました。

    に適用される属性要素。 IE6 および IE7 では、この属性によりオーバーフローが発生しました。効果がなくなっていく。ただし、この属性を削除すると、
      の left 属性を使用する JavaScript スライダーの機能が壊れます。要素をスライド コンテンツに追加します。

      解決策:

      問題を解決するには、開発者は、position:relative; を追加するようにアドバイスされました。代わりにコンテナ要素に追加します。この場合、それは

      を追加することを意味します。

      の直下そして前述のスタイルを与えます。この変更により競合が効果的に解決され、他のブラウザでの機能を損なうことなく、IE6 および IE7 でスライダーが正しく動作できるようになりました。

    以上がオーバーフローが発生する理由: 非表示。位置: 相対での作業を停止します。 IE6とIE7では?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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