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 }
原文地址:https://www.cnblogs.com/amws/p/3142068.html