当前位置：首页 → 问答吧 → ie6、7下overflow不能隐藏溢出的position子元素问题。。

ie6、7下overflow不能隐藏溢出的position子元素问题。。

时间：2011-06-24

来源：互联网

ie6、7下蓝色box超出的文字部分不能被隐藏，ff下可以隐藏，不知道是什么原因
求解。。
HTML code


<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
        <style type="text/css"><!--
            .wrapper {
                margin: 0 200px;
                width:400px; height:400px;
                border:1px solid #999;
            }
            .inner {
                margin:100px;
                height:100px; height:100px;
                border:1px solid blue; overflow:hidden;
            }
            dl { position:relative;}
            span {
                position:absolute; z-index:-1;
            }
        --></style>
    </head>
    <body>
        <div class="wrapper">
            <div class="inner">
                <dl>
                    <dt>123</dt>
                    <dd>
                        撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发
                        撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发
                        撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发撒旦发
                        <span>123</span>
                    </dd>
                </dl>
            </div>
        </div>
    </body>
</html>

作者: zgzglike 发布时间: 2011-06-24

CSS code


.inner {
                position:relative;
                margin:100px;
                height:100px; height:100px;
                border:1px solid blue; overflow:hidden;
            }

给他的爸爸也加上position:relative;
ie6 bug

作者: zell419 发布时间: 2011-06-24

.wrapper {
margin: 0 200px;
width:400px; height:400px;
border:1px solid #999;
}
.inner {
margin:100px;
height:100px; height:100px;
border:1px solid blue; overflow:hidden;
position:relative
}
dl { position:relative;}
span {
position:absolute; z-index:-1;
}

给父元素也加上相对定位

作者: aspwebchh 发布时间: 2011-06-24

ie6、7下overflow不能隐藏溢出的position子元素问题。。

热门阅读

热门下载