分類  >  Web前端 >

webkit中設立align為center的div中的table會自動產生外邊距magin，用js改變margin將不起作用

tags：    時間：2013-12-11 08:46:21
webkit中設置align為center的div中的table會自動產生外邊距magin，用js改變margin將不起作用

該現象重現代碼如下：

 

<!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。

 

 

 

推薦閱讀文章

Bookmark the permalink ，來源：互聯網