"position:relative"在IE中的Bug

最新推荐文章于 2020-09-05 12:33:29 发布

weixin_34261415

最新推荐文章于 2020-09-05 12:33:29 发布

阅读量133

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/heimanba/p/3810651.html

版权

当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"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的注释还原即可。
以下是正常页面：

转载于:https://www.cnblogs.com/heimanba/p/3810651.html

weixin_34261415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
"position:relative"在IE中的Bug

当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。页面源码：Html代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w...
复制链接

扫一扫