网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索 电影文章

文章热门排行随机文章推荐文章

IE6bug绝对定位及其解决办法

关注我吧
 2012/11/30 16:52:41 阅读次数:2334

IE6bug绝对定位及其解决办法

IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:

<!–IE6下的left定位错误–>  
<div style="position:relative;border:1px solid orange;text-align:center;">  
    <a href="http://www.86y.org">http://www.86y.org/</a>  
    <div style="position:absolute;top:0;left:0;background:#CCC;">ok22</div>  
</div>  
<!–IE6下的left定位错误–>  
<hr />  
<div style="position:relative;border:1px solid orange;text-align:right;">  
    <a href="http://www.86y.org">http://www.86y.org/</a>  
    <div style="position:absolute;top:0;left:0;background:#CCC;">ok22</div>  
</div>

上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。 
2、给父层设置宽度(width)。

<!–解决方法1 zoom:1–>  
<hr />  
<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">  
    <a href="http://www.86y.org">http://www.86y.org/</a>  
    <div style="position:absolute;top:0;left:0;background:#CCC;">ok22</div>  
</div>  
<!–解决方法2 设置width–>  
<hr />  
<div style="position:relative;width:99%;border:1px solid orange;text-align:center;">  
    <a href="http://www.86y.org">http://www.86y.org/</a>  
    <div style="position:absolute;top:0;left:0;background:#CCC;">ok22</div>  
</div>

下面的这段代码在IE6下,bottom定位错误:

<!–IE6下的bottom定位错误–>  
<hr />  
<div style="position:relative;border:1px solid orange;text-align:center;">  
     <a href="http://www.86y.org">http://www.86y.org/</a>  
<div style="position:absolute;bottom:0;left:0;background:#CCC;">ok22</div>  
</div>

解决办法和left定位类似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。

<!–解决方法1 zoom:1–>  
<hr />  
<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">  
    <a href="http://www.86y.org">http://www.86y.org/</a><br />  
    <a href="http://www.86y.org">http://www.86y.org/</a>  
    <div style="position:absolute;bottom:0;left:0;background:#CCC;">ok22</div>  
</div>  
<!–解决方法2 设置height–>  
<hr />  
<div style="position:relative;height:60px;border:1px solid orange;text-align:center;">  
    <a href="http://www.86y.org"http://www.86y.org/</a>  
    <div style="position:absolute;bottom:0;left:0;background:#CCC;">ok22</div>  
</div>  

IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout:        
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值


大家有什么问题或技术上的想法可以在此与大家分享,也可以点击链接加入群:【幸凡学习网技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭