兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

Posted 影子疯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素相关的知识,希望对你有一定的参考价值。

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border:10px solid black;
            overflow: hidden;
        }
        .content{
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

显示效果如下:

解决方案:给父级也加上position:relative;属性

.box{
    width: 200px;
    height: 200px;
    border:10px solid black;
    overflow: hidden;
    *position: relative;
}
.content{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}

 

以上是关于兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素的主要内容,如果未能解决你的问题,请参考以下文章

兼容性—IE6/7/8下input空隙问题

Win 7家庭版如何测试网页的IE6、7、8兼容性?

HTML+CSS基础之兼容性问题

IE6,7,8以及Firefox,Chrome下各种选择器的优先

ie下面兼容性问题的一些总结(转)

img标签中的alt属性在IE6/7/8中的兼容问题