hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

Elements with `overflow` set to either `hidden` or `auto` behave as if overflow was set to `visible` when descendants that are causing overflow have position: relative set on them

Date of the Tutorial

Mon Aug 17 15:51:12 2009

Description

Here's another bug I found on Gérard Talbot's IE7 Bug Collection Page. I shamelessly stole the image he was using in his demo, just because I think it's a brilliant way to demonstrate the bug (I hope he won't mind). What I would like to add to Gérard's bug description is that block-level elements fail to clip as well and the bug is equally present when { overflow: auto } is used instead of { overflow: hidden; }. Let's have a look:

Demo

HTML Code:

<div class="container">
    <img src="RelPosChildNotClippedByParentOverflowHidden.png"
         width="300"
         height="300"
         alt="">
</div>
<div class="container">
    <div id="block"></div>
</div>

CSS Code:

.container {
    height: 200px;
    width: 200px;
    overflow: hidden;
    border: 5px solid #000;
}
#block {
    width: 300px;
    height: 300px;
    background: url(RelPosChildNotClippedByParentOverflowHidden.png);
}
#block, img {
    position: relative;
}

Sane browsers will show only the green block along with a border around it. IE8 will fail to clip by the 200px by 200px container's size and will show the red parts of the image that are only present beyond 200px x 200px square. Also, note that the overflowing descendants cover the border present on .container

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Mon Aug 17 15:51:27 2009

Fixed Versions

All of the affected

Description

The fix for the bug is rather trivial. Let's glance at the fixed demo first:

HTML Code:

<div class="container">
    <img src="RelPosChildNotClippedByParentOverflowHidden.png"
         width="300"
         height="300"
         alt="">
</div>
<div class="container">
    <div id="block"></div>
</div>

CSS Code:

.container {
    margin-bottom: 150px;
    height: 200px;
    width: 200px;
    overflow: hidden;
    border: 5px solid #000;
    position: relative;
}
#block {
    width: 300px;
    height: 300px;
    background: url(RelPosChildNotClippedByParentOverflowHidden.png);
}
#block, img {
    position: relative;
}

Our markup stayed the same. The only thing I've added is { position: relative; } on our parents - the .container ' element"><div>s. Now IE7 behave just like the rest of the pack. Enjoy!