首頁 > 文章 > web前端 > 為什麼 `overflow:hidden` 不能在 IE6 和 IE7 中使用 `position:relative` ？

為什麼 `overflow:hidden` 不能在 IE6 和 IE7 中使用 `position:relative` ？

Susan Sarandon原創: 2024-11-02 15:42:30155瀏覽

Why Doesn't `overflow: hidden` Work with `position: relative` in IE6 and IE7?

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中文網其他相關文章！

css html for using Property function this position overflow ul issue

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何阻止網址列在行動瀏覽器中隱藏？下一篇：如何阻止網址列在行動瀏覽器中隱藏？

看更多