Why Doesn\'t `overflow: hidden` Work with `position: relative` in IE6 and IE7?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-11-02 15:42:30

Original

248 people have browsed it

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

IE6 and IE7 CSS Problem with "overflow: hidden" and "position: relative"

This problem arises when attempting to hide non-active slides in a slider using "overflow: hidden". In IE6 and IE7, this CSS property fails to function for elements with "position: relative" applied.

Consider the following isolated HTML structure:

<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>

Copy after login

The goal is to hide the non-active slides using "overflow: hidden" on the "item-list" div. However, this fails in IE6 and IE7 due to the "position: relative" style applied to the "ul".

The solution lies in adding "position: relative" to the container of the element in question. In this case, since "body" is the container, adding a "div" directly underneath it and setting its position to "relative" would resolve the issue.

The above is the detailed content of Why Doesn\'t `overflow: hidden` Work with `position: relative` in IE6 and IE7?. For more information, please follow other related articles on the PHP Chinese website!