修复IE下相对定位子元素溢出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 所示：

图10-15 IE6中的运行效果

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

关于作者

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

修复IE下相对定位子元素溢出Bug相关推荐

Vue中v-for必须在vue实例对应元素下的子元素中循环渲染数据
异常信息 Cannot use v-for on 1 stateful componentroot element because it renders multiple elements 翻译大意: ...
[转载] js 下获取子元素的方法 -- 李富生
地址:https://www.cnblogs.com/web-fusheng/p/6816440.html firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChi ...
js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...
CSS垂直方向布局中，子元素溢出父元素，如何处理？
默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,就是设置多少就是多少子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出, 使用overflow属性设置 ...
jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
js 获取元素，同级元素下的子元素总结
太原总结不慌不慌,来日方长 ** 1.获取同级元素 form 下的 div 元素下的 input标签的value值 ** //html代码 <div id="replySubmit& ...
修复IE下列表 li 底部空行Bug
在IE6及更低版本中,如果在 li 元素中包含 display: block 的元素时,li 元素之间的空格将会转换为一个空行,夹在每个 li 的中间. 假设使用上一节的HTML结构来制作垂直导航,为 ...
CSS关于子元素溢出
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
jq获取父元素下的子元素
导入jq库通过parent获取父元素 children获取子元素 $(".make-order").click(function(e) {var theli =$(this).p ...

修复IE下相对定位子元素溢出Bug

修复IE下相对定位子元素溢出Bug相关推荐

最新文章

热门文章