"position:relative"在IE中的Bug

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

iteye_18009

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

阅读量185

点赞数

分类专栏： JavaScript/CSS 文章标签： IE XHTML HTML Web

JavaScript/CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

请看下图：
[img]http://hyj1254.iteye.com/upload/picture/pic/57399/c9f3d2a0-0e31-3660-85fd-b872ca2c584d.jpg[/img]
即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。[color=blue]根源就是子元素的"position:relative"[/color]。目前只发现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>

解决方法：[b]为父元素也添加"position:relative"设置[/b]。在上例中，只需把#container的注释还原即可。
以下是正常页面：
[img]http://hyj1254.iteye.com/upload/picture/pic/57401/cf531f9b-1c00-3f74-bea8-0fbe2aa5b47f.jpg[/img]