該現象重現代碼如下:
<!DOCTYPE HTML> <HTML> <HEAD> </HEAD> <BODY> <div align="center" style="width:500px;border:1px solid gray;"> <table id="a" style="width:100px;background:gold;"><tr><td> table </td></tr></table> </div> <p> <input type="button" value="modify table margin" onclick="modify()"/> </p> <script> var i = 0; function modify(){ i = i + 100; var obj = document.getElementById('a'); obj.style.marginLeft = i+'px'; } </script> </BODY> </HTML>
當點擊按鈕modify table margin時,函數modify會修改talbe的margin,以下是各瀏覽器的表現
IE/Firefox/Opera : 每點擊一次都會移動100px
Safari/Chrome : 點擊后不移動
當利用修改margin來實現圖片滾動的效果webkit瀏覽器中將失效。
把父元素div的align屬性刪掉或align=left都不會重現該bug。