首页 > 文章 > 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

上一篇：How Can I Stop the Address Bar From Hiding in Mobile Browsers?下一篇：Why Does My Font Size Change in iPhone Safari, and How Can I Control It?

查看更多