Why Does overflow: hidden; Stop Working with position: relative; in IE6 and IE7?

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

In an attempt to create a homepage slider that utilizes jQuery to navigate images, their respective titles, and teasers, a developer encountered a puzzling issue. While the slider functioned seamlessly in other browsers, it malfunctioned in IE6 and IE7, specifically in regards to hiding inactive slides using overflow: hidden;.

An isolated HTML page was meticulously recreated to pinpoint the problematic code:

<code class="html"><style>
  ul {
    position: relative;
  }

  .item-list {
    overflow: hidden;
    width: 499px;
  }
</style></code>

After thorough investigation, it was discovered that the culprit was the "position: relative;" attribute applied to the

element. In IE6 and IE7, this attribute resulted in overflow: hidden; becoming ineffective. However, removing this attribute would break the functionality of the JavaScript slider, which used the left attribute of the
element to slide content.

Solution:

To resolve the issue, the developer was advised to add position: relative; to the container element instead. In this case, that would mean adding a

directly beneath the and giving it the aforementioned style. This modification effectively solved the conflict, allowing the slider to operate correctly in IE6 and IE7 without compromising its functionality in other browsers.

The above is the detailed content of Why Does overflow: hidden; Stop Working with position: relative; in IE6 and IE7?. For more information, please follow other related articles on the PHP Chinese website!