"position:relative"在IE中的Bug

时间：2014-06-27 13:14:33 阅读：188 评论：0 收藏：0 [点我收藏+]

请看下图：

即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。
页面源码：

Html代码  
<!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的注释还原即可。
以下是正常页面：
bubuko.com,布布扣

"position:relative"在IE中的Bug,布布扣,bubuko.com

"position:relative"在IE中的Bug

标签：style http tar ext color com

原文地址：http://www.cnblogs.com/heimanba/p/3810651.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行