IE7のoverflow:hiddenのバグ

IE7で親要素にoverflow:hiddenを設定しているにもかかわらず子要素がはみ出るバグ。親要素にposition: relative;ではみ出さなくなる。

by FiNGAHOLiC

HTML

<div class="mod-box">
    <div class="mod-box-inner">
        <div class="mod-box-inner-inner"></div>
    </div>
</div>

CSS

.mod-box{
    width: 200px;
    height: 200px;
    border: 5px solid yellow;
    overflow: hidden;
}

.mod-box-inner{
    width: 400px;
    height: 200px;
    position: relative;
    background: pink;
}

.mod-box-inner-inner{
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index:1;
    background: red;
}