jQuery width() 获取/设置跨不同浏览器的不一致

Question

我有 TH 元素，它的左右填充设置为 18px，我尝试通过 jQuery 获取它的宽度，将获得的 px 宽度转换为 % 并将该元素的宽度设置为计算百分比。

var originalWidth = $("#thElement").width();
var newWidth = (originalWidth / $("#thElement").parent().width()) * 100
$("#thElement").width(newWidth + "%");

在上面代码的第一行，所有浏览器都返回没有填充的宽度。没关系。

但在第三行，只有 Firefox 将元素的宽度再次设置为计算值，而无需填充。结果是，在 IE11、Chrome 和 Opera 中，宽度减少了 36 px，因为新宽度的一部分被填充“消耗”了。

任何想法，如何解决这个问题并确保所有这些浏览器的一致性？

编辑：我使用的是 jQuery 1.11.1

Answer 1

您应该在 CSS 上设置 box-sizing 属性，因为如果未声明此属性，不同的浏览器有不同的标准，这会影响填充和边框是否计算为元素大小的一部分。

#thElement {
    box-sizing: border-box;
} 

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp