精美而实用的网站,关注web编程技术与网站SEO推广,追求极致,让您轻松愉快的学习

IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px的空隙,这个时候我们只需要给参照物高度设置为偶数即可解决。

范例HTML代码

<h2>bug</h2>
<p>IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px的空隙</p>
<div class="m-demo">
    <div class="itm itm-1">&nbsp;</div>
    <div class="itm itm-2">&nbsp;</div>
    <div class="itm itm-3">&nbsp;</div>
    <div class="itm itm-4">&nbsp;</div>
</div>    
<h2>fix</h2>
<p>设为偶数</p>
<div class="m-demo m-demo-fix">
    <div class="itm itm-1">&nbsp;</div>
    <div class="itm itm-2">&nbsp;</div>
    <div class="itm itm-3">&nbsp;</div>
    <div class="itm itm-4">&nbsp;</div>
</div>  

解决CSS代码

/* IE6中绝对定位1像素偏差 */
.m-demo{position:relative;width:501px;height:101px;margin:0 0 20px;background:#ff0097;}
.m-demo .itm{position:absolute;width:20px;height:20px;overflow:hidden;background:#4eb3b9;}
.m-demo .itm-1{top:0;left:0;background:#999;}
.m-demo .itm-2{top:0;right:0;}
.m-demo .itm-3{left:100%;top:100%;}
.m-demo .itm-4{left:0;bottom:0;}
.m-demo-fix{width:500px;height:100px;}


Tags:IE 1像素 偏差
如果本文帮到了您,请分享到朋友圈或推荐给好友!

网络编程 - 分类栏目