為什麼 `overflow:hidden` 不能在 IE6 和 IE7 中使用 `position:relative` ？
- Susan Sarandon原創
- 2024-11-02 15:42:30273瀏覽
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」的活動幻燈片。但是，由於「ul」套用了「position:relative」樣式，因此在 IE6 和 IE7 中會失敗。
解決方案在於將「position:relative」加入相關元素的容器中。在這種情況下，由於“body”是容器，因此直接在其下方新增“div”並將其位置設為“相對”即可解決問題。
以上是為什麼 `overflow:hidden` 不能在 IE6 和 IE7 中使用 `position:relative` ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn