令人蛋疼的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"> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>bbbb</p> <p>bbbbb</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"> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> </div> </div> 如下图: 如果.parent中的position设置为absolute也是如此。 终上所述: 哪个需要设置overflow;hidden,生效,就在哪个上面设置position:relative;
解决IE6,IE7不能隐藏绝对定位溢出的内容
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
IE6、IE7、IE8、Firefox、Opera CS
针对样式名 如果只让ie6看见用*html .head{color:#000;}如果只让ie7看见用*+html .head{color:#0
Opera Firefox CSS 浏览器 Chrome -
IE6 IE7 ‘JSON’ 未定义
今天在调试javascript程序,在FireFox和Chrome没有问题,
json undefined chrome firefox javascript