IE6 7 父级元素的overflow:hidden 是包不住子级的relative

weixin_34208283

于 2016-03-02 18:25:00 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hduhdc/p/5236055.html

本文介绍了一个关于IE6和IE7浏览器中父元素使用了hidden溢出属性时，其绝对定位子元素超出部分被裁剪的问题及解决方案。通过为父元素添加相对定位的方法，可以有效解决这一兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: red;
11                 border: 10px solid black;
12                 overflow: hidden;
13                 *position: relative;
14             }
15             .content{
16                 width: 400px;
17                 height: 400px;
18                 background-color: blue;
19                 position: relative;
20             }
21         </style>
22         <!--
23             解决方案：
24                 针对ie6、7给父级元素添加相对定位
25         -->
26     </head>
27     <body>
28         <div class="box">
29             <div class="content"></div>
30         </div>
31     </body>
32 </html>