IE6/7BUG之overflow:hidden无效-优快云博客

BUG描述：

当父容器设置了OVERFLOW：hidden,子元素比父容器高（宽）部分在正常情况是不显示的，而

IE6/7由于这个BUG显示了子元素的过大的部分

BUG代码

 1 <div class="container">
 2     <img src="RelPosChildNotClippedByParentOverflowHidden.png"
 3          width="300"
 4          height="300"
 5          alt="">
 6 </div>
 7 
 8 <div class="container">
 9     <div id="block"></div>
10 </div>

 1 .container {
 2     height: 200px;
 3     width: 200px;
 4     overflow: hidden;
 5     border: 5px solid #000;
 6 }
 7 
 8 #block {
 9     width: 300px;
10     height: 300px;
11     background: url(RelPosChildNotClippedByParentOverflowHidden.png);
12 }
13 
14 #block, img {
15     position: relative;
16 }

BUG截图（IE6）如下：

BUG解决：

为父元素添加样式：POSITION:RELATIVE

 1 .container {
 2     margin-bottom: 150px;
 3     height: 200px;
 4     width: 200px;
 5     overflow: hidden;
 6     border: 5px solid #000;
 7     position: relative;
 8 }
 9 
10 #block {
11     width: 300px;
12     height: 300px;
13     background: url(RelPosChildNotClippedByParentOverflowHidden.png);
14 }
15 
16 #block, img {
17     position: relative;
18 }