揭秘CSS(第 1 版)
10.4.6 相对定位子元素溢出Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

相对容器中绝对定位Bug

列表 li 底部空行Bug

列表 li 的阶梯Bug

文本3像素偏移Bug

浮动元素双倍边距Bug

相对定位子元素溢出Bug

在页面上,常常使用 overflow 属性,来控制一个元素内容溢出时的处理方式。然而,在IE6和IE7中,当父元素设置了 overflow: auto 或 overflow: hidden,当子元素使用相对定位且高度大于父元素高度时,子元素就会溢出到父元素的外面。

假设页面上有两个元素,#outter 为父元素,#inner 为子元素:

<div id="outter">
    <div id="inner">当子元素的高度大于父元素高度时…</div>
</div>

父元素设置了固定宽度和高度,并设置了 overflow: auto,让它在需要的时候出现滚动条。子元素也设置了固定宽度,并使用相对定位。为了方便查看效果,为父元素和子元素都设置了边框:

#outter {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px solid #ccc;
}
#inner {
    width: 100px;
    position: relative;
    border: 1px dashed #666;
}

正常情况下,如果子元素中的内容超过了父元素的高度,则父元素会自动出现滚动条,并且隐藏溢出的内容。在现代浏览器中的运行结果如图 10‑14 所示:

现代浏览器中的运行结果
图10-14 现代浏览器中的运行结果

而在 IE6 和 IE7 中,父元素也出现了滚动条,但是,子元素的内容却溢出到了父元素外面。运行结果如图 10‑15 所示:

IE6中的运行效果
图10-15 IE6中的运行效果

解决这个问题的方法很简单,只需为父元素设置 position: relative,让父元素也使用相对定位就可以了。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验