IE6绝对定位的bug及其解决办法
作者:admin
来源:未知
日期:2012-01-02
点击:0
Example Source Code [www.]<!–IE6下的left定位错误–><div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
<!–IE6下的left定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>
<a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。
2、给父层设置宽度(width)。
Example Source Code [www.]<!–解决方法1 zoom:1–><hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
<!–解决方法2 设置width–>
<hr />
<div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”>
<a href=”http://www.”>http://www./</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>
下面的这段代码在IE6下,bottom定位错误:
Example Source Code [www.]<!–IE6下的bottom定位错误–><hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”http://www.”>http://www./</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div>
</div>
解决办法和left定位类似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。
Example Source Code [www.]<!–解决方法1 zoom:1–><hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://www.”>http://www./</a><br />