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 }