重绘解决IE6/IE7 relative下margin-left不起作用问题实例页面

回到相关文章 »

代码:

CSS代码:
.box{margin-bottom:100px; overflow:hidden; *zoom:1;}
.inner{display:inline; width:200px; height:200px; background-color:green; margin-left:100px; margin-right:20px; float:left; position:relative;}
                
HTML代码:
<div class="box">
    <div id="innerNoRepain" class="inner"></div>
    <p><button id="buttonNoRepain">margin失效问题显现</button></p>
</div>
<div class="box">
    <div id="innerRepain" class="inner"></div>
    <p><button id="buttonRepain">className重绘修复效果</button></p>
</div>
                
JS代码:
$("#buttonNoRepain").bind("click", function() {
    $("#innerNoRepain").css("top", 100);	
});
$("#buttonRepain").bind("click", function() {
    $("#innerRepain").css("top", 100);
    // 添加任意类名 重绘修复
    $(this.parentNode).addClass("repain");
});
                

效果: