overflow:hidden 解決IE6,IE7不能隱藏絕對定位溢出的內容
令人蛋疼的IE,IE6/IE7下父元素有相對/絕對定位時,子元素在IE6和IE7下overflow:hidden;失效 。
情況一:(在parent上增加position:relative)
復制代碼代碼如下:
style type="text/css"
.parent{ width:100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;}
.sonF{ position:relative;}
.son{ width:100px; height:100px; position:absolute; left:0;top:0;}
p{margin:0;padding:0;}
/style
/head
body
div class="parent"
div class="sonF"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
pbbbb/p
pbbbbb/p
/div
/div
/div
情況二:(給son增加position:relative)
復制代碼代碼如下:
style type="text/css"
.parent{ width:100px; height:100px; position:absolute; border:1px solid #f00;}
.son{ width:100px; height:100px;left:0;top:0; overflow:hidden; position:relative;}
p{margin:0;padding:0;}
/style
div class="parent"
div class="son"
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
paaaaaaaaaaaaaa/p
/div
/div
如下圖:
如果.parent中的position設置為absolute也是如此 。
終上所述:
哪個需要設置overflow;hidden , 生效,就在哪個上面設置position:relative;
