html的元素高度如何计算,如何检索HTML元素的实际宽度和高度？

以防万一它是有用的人，我把一个文本框，按钮和DIV都具有相同的CSS ：

width:200px;

height:20px;

border:solid 1px #000;

padding:2px;

我在Chrome，Firefox和ie-edge上试过它，我尝试过使用jquery而没有使用它，并且我尝试使用它并且没有使用box-sizing:border-box。总是与

结果：

Firefox Chrome IE-Edge

with w/o with w/o with w/o box-sizing

$("#t").width() 194 200 194 200 194 200

$("#b").width() 194 194 194 194 194 194

$("#d").width() 194 200 194 200 194 200

$("#t").outerWidth() 200 206 200 206 200 206

$("#b").outerWidth() 200 200 200 200 200 200

$("#d").outerWidth() 200 206 200 206 200 206

$("#t").innerWidth() 198 204 198 204 198 204

$("#b").innerWidth() 198 198 198 198 198 198

$("#d").innerWidth() 198 204 198 204 198 204

$("#t").css('width') 200px 200px 200px 200px 200px 200px

$("#b").css('width') 200px 200px 200px 200px 200px 200px

$("#d").css('width') 200px 200px 200px 200px 200px 200px

$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px

$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px

$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px

document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206

document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200

document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206

document.getElementById("t").offsetWidth 200 206 200 206 200 206

document.getElementById("b").offsetWidth 200 200 200 200 200 200

document.getElementById("d").offsetWidth 200 206 200 206 200 206