scrollWidth offsetWidth offsetHeight offsetLeft .....

 

function init(){
	
		 var a = document.getElementById("a");
		 a.innerHTML +="scrollWidth :"+ a.scrollWidth  +"<br/>"
		             + "scrollHeight :" + a.scrollHeight +"<br/>"
					 + "offsetWidth :" + a.offsetWidth +"<br/>"
					 + "offsetHeight :" + a.offsetHeight +"<br/>"
					 + "clientWidth :"+  a.clientWidth  +"<br/>"
					 + "clientHeight :"+  a.clientHeight  +"<br/>"
					 + "offsetLeft: "+a.offsetLeft+  "<br/>"
					 + "offsetTop: "+a.offsetTop
					  
 
	}

 

<div style="width:3600px ; height:600px; position:absolute; top:100px">
  <div style="width:300px ; height:200px; background:#CCCCCC; border: 1px ;padding:10px ; margin:3px;  position:absolute; top:2px; border:7px #000000 solid" id="a"  ></div>
 </div>

 IE

scrollWidth :20
scrollHeight :39
offsetWidth :300
offsetHeight :200
clientWidth :286
clientHeight :186
offsetLeft: 3
offsetTop: 5

 

IE中 border + clientWidth  = width

 

 

FF:

 

scrollWidth :334
scrollHeight :234
offsetWidth :334
offsetHeight :234
clientWidth :320
clientHeight :220
offsetLeft: 3
offsetTop: 5

 

FF 中 :

    clientWidth  = width + padding