IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px的空隙,这个时候我们只需要给参照物高度设置为偶数即可解决。
范例HTML代码
<h2>bug</h2> <p>IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px的空隙</p> <div class="m-demo"> <div class="itm itm-1"> </div> <div class="itm itm-2"> </div> <div class="itm itm-3"> </div> <div class="itm itm-4"> </div> </div> <h2>fix</h2> <p>设为偶数</p> <div class="m-demo m-demo-fix"> <div class="itm itm-1"> </div> <div class="itm itm-2"> </div> <div class="itm itm-3"> </div> <div class="itm itm-4"> </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;}