Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?-CSS Tutorial-php.cn

Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?

Patricia Arquette

Release： 2024-11-03 04:27:31

Original

928 people have browsed it

Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?

IE6 IE7 CSS Problem with overflow: hidden; - position: relative; Combo

This issue arises when attempting to hide inactive slides in a slider by utilizing the CSS property overflow: hidden. However, in IE 6 and 7, this approach fails, leaving non-active slides visible. The root cause lies in the combination of overflow: hidden and position: relative on the containing ul element.

A known workaround for this issue is to add position: relative to the container element. In the given HTML structure, the body tag serves as the container. To resolve the problem, add a div directly below the body and assign it position: relative.

<code class="html"><body>
  <div id="container">
    ...
  </div>
</body></code>

Copy after login

In the provided CSS, add the following line:

<code class="css">#container {
  position: relative;
}</code>

Copy after login

This modification will resolve the issue and enable the use of overflow: hidden to hide inactive slides in IE 6 and 7, ensuring proper slider functionality.

The above is the detailed content of Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?. For more information, please follow other related articles on the PHP Chinese website!