Home > Article > Web Front-end > Why Does `overflow: hidden` Fail to Hide Inactive Slides in IE6 and IE7 When Combined with `position: relative`?

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

Patricia ArquetteOriginal: 2024-11-03 04:27:31859browse

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>

In the provided CSS, add the following line:

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

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!

css html for Property this position overflow ul issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Some Free Icon Libraries Next article：Some Free Icon Libraries

See more

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

Related articles