ホームページ >ウェブフロントエンド >CSSチュートリアル >IE6 と IE7 で「overflow: hidden」が「position:relative」で動作しないのはなぜですか?
IE6 と IE7 で「overflow: hidden」が「position:relative」で動作しないのはなぜですか?
- Susan Sarandonオリジナル
- 2024-11-02 15:42:30271ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。