3层absolute嵌套时的文字显示问题

最新推荐文章于 2019-09-07 15:36:32 发布

iteye_19781

最新推荐文章于 2019-09-07 15:36:32 发布

阅读量389

点赞数

文章标签：浏览器 XHTML HTML

三个sbsolute嵌套时,最里层文字会被挤为一行,如果去掉一个div则文字伸展到最外层大小 (ie7 ff3 safari4 chrome2表现相同)

如果最内层不是文字而是图片,div5不出滚动条(非IE7),IE7 width会被最外层限制,div5出滚动条

解决办法不知,不知道算不算浏览器的bug



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<HEAD>
<TITLE>帮助</TITLE>

</HEAD>
<style>
*{
    margin: 0px;
    padding: 0px;
}


#div5{
    border: 2px solid red;
    overflow: auto;
}

#div1{
    position: absolute;
    border: 2px solid yellow;
    width: 200px;
    height: 200px;
}
#div2{
    position: absolute;
    border: 2px solid yellow;
    width: auto;
    height: auto;
}
#div3{
    position: absolute;
    border: 2px solid yellow;
    width: auto;
    height: auto;
}
</style>

<script>
function init(){

}
</script>
<body onload="init()">
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div5">
                    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
                </div>
            </div>
        </div>
    </div>
</body>

<!--三个sbsolute嵌套时,最里层文字会被挤为一行,如果去掉一个div则文字伸展到最外层大小  (ie7 ff3 safari4 chrome2表现相同)

    如果最内层不是文字而是图片,div5不出滚动条(非IE7),IE7 width会被最外层限制,div5出滚动条


     解决办法不知,不知道算不算浏览器的bug
      -->
</HTML>