分類  >  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 ,來源:互聯網