IE6常见Bug6：定位位置错误

来源：建站模板网日期：2019-05-31 10:08:32 热度：6473℃

如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题，
解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定位位置错误</title>
<style>
/* IE6中定位位置错误 */
.demo{position:relative;margin:0 0 10px;padding:20px;background:#ddd;}
.demo .content{width:200px;height:20px;background:red;}
.demo .absolute{position:absolute;bottom:0;left:0;width:50px;height:50px;background:green;}
#fix{zoom:1;/*触发hasLayout*/}
</style>
</head>
<body>
<h2>bug</h2>
<div class="demo">
<div class="content"></div>
<div class="absolute"></div>
</div>

<h2>解决方案</h2>
<p>触发参照物haslayout</p>
<div class="demo" id="fix">
<div class="content"></div>
<div class="absolute"></div>
</div>
</body>
</html>

在IE6中显示效果图如下：

效果描述：灰色为"相对定位的父容器"的padding，红色为"相对定位的父容器"的内容区，绿色为"绝对定位的子容器"
小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题

上一篇：IE6常见Bug7：定位元素溢出不动

下一篇：IE6常见Bug5：表单元素偏离

模板市场

IDC服务

增值服务

IE6常见Bug6：定位位置错误