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

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

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

文章标签：

本文探讨了在HTML中使用绝对定位布局时遇到的问题：当三个绝对定位的div元素进行嵌套时，内部的文字内容会被压缩成一行显示，移除一层嵌套后问题得到解决。此外还讨论了当内部元素为图片时，外部容器不显示滚动条的情况。

三个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>

by: 天堂左我往右