IE6绝对定位的bug及其解决办法
点击次数:更新时间:2011-02-17 11:02:48【打印】【关闭】
IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题: <!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”> <a href=”http://www.52css.com”>http://www.52css.com/</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.52css.com”>http://www.52css.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div> </div>
<!–解决方法1 zoom:1–>
<hr /> <div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”> <a href=”http://www.52css.com”>http://www.52css.com/</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.52css.com”>http://www.52css.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div> </div>
<!–IE6下的bottom定位错误–>
<hr /> <div style=”position:relative;border:1px solid orange;text-align:center;”> <a href=”http://www.52css.com”>http://www.52css.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div> </div>
<!–解决方法1 zoom:1–>
<hr /> <div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”> <a href=”http://www.52css.com”>http://www.52css.com/</a><br /> <a href=”http://www.52css.com”>http://www.52css.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div> </div> <!–解决方法2 设置height–> <hr /> <div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”> <a href=”http://www.52css.com”>http://www.52css.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div> </div>
来源:52css.com |