请看下图：
即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。
根源就是子元素的"position:relative"。目前只发现ie中有此问题。
页面源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>relative bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
<!--
#container {
background:blue;
height:100px;
width:300px;
overflow:auto;
/*position:relative;*/
}
#container>div {
background:red;
height:300px;
width:150px;
margin:0 auto;
position:relative;/*这句会触发bug*/
}
-->
</style>
</head>
<body>
<div id="container">
<div></div>
</div>
</body>
</html>
解决方法：
为父元素也添加"position:relative"设置。在上例中，只需把#container的注释还原即可。
以下是正常页面：
分享到：
相关推荐
- **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...
其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性，这个属性允许元素在页面滚动时保持其在屏幕上的位置，常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好，但在IE...
2. **设置position: relative**：在进行页面布局时，特别是需要定位的元素，应设置`position: relative`。这是因为IE6在处理绝对定位时存在一些问题，不设置相对定位可能导致元素的位置难以控制，甚至出现重叠现象。...
在Web开发中，IE6浏览器常常给开发者带来诸多挑战，其中一个问题就是对于CSS中的`position:fixed`属性的支持。`position:fixed`通常用于创建一个固定定位的元素，使其在页面滚动时仍然保持在屏幕的某个位置。然而，...
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
然而，由于`#child a`设置了`position:relative`，在IE6中，子元素的内容会超出父元素的高度限制，这违背了`overflow:hidden`的预期效果。 解决这个问题的一个常见方法是为父元素`#parent`添加`position:relative`...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer浏览器中，当处理表格（table）元素的定位（position）属性与下拉选择框（select）元素交互时出现的一个常见问题。...
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug 我的办法：子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了。 IE下CSS溢出隐藏失败(IE overflow:hidden失效) 复制代码...
position: relative; height: expression(this.style.height >= this.scrollHeight ? '880px' : this.scrollHeight + 'px'); ``` 10. **图片底部空白**： 在IE中，img元素下方有时会出现额外的空白。这通常是...
在其他现代浏览器中，CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位，但在IE6中，这些属性的处理方式却大不相同，导致开发者需要进行特殊的“hack”来解决这些问题。 首先，IE6不...
可是在IE6下查看，却变成了right:1px的效果了： IE6还有奇数宽度的bug，解决方案就是将外部相对定位的div宽度改成偶数。查看源码： CSS代码 #out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*...
解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 复制代码代码如下:<ul><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我...
在这些版本的IE浏览器中，当父元素设置了position:relative，其子元素所设置的z-index属性有时会失效，导致层叠顺序与预期不符。 z-index属性是CSS中的一个属性，它控制着定位元素的堆叠顺序。正常情况下，具有更高...
解决方案通常是在父级元素中添加`position:relative;`并可能需要调整`top`和`bottom`属性。 5. **重复字符问题** - 当一个包含浮动元素的div宽度等于内部div的总和，并且内部有注释时，IE6会出现重复字符。可以...
上述问题所描述的正是IE6和IE7在处理`position`属性时的一个经典bug。当在一个具有滚动条的`div`元素内部，子元素设置了`position: absolute`或`position: relative`时，这些子元素不会随滚动条滚动，而是超出滚动...
`position:absolute`在IE6下可能无法正常工作，需要使用`position:relative`和`left/top`配合，或者使用`position:static`和`margin`调整。 8. **层叠上下文** IE6对层叠上下文的理解不同于其他浏览器，可能导致z...
在早期的网页设计中，由于Internet Explorer 6（简称IE6）的市场份额较大，开发者们经常需要面对如何在IE6中实现与现代浏览器相同效果的挑战。标题"div模拟table兼容ie620140424"指出，这是一个关于在2014年时如何...