jQuery width() get/set 跨不同浏览器不一致

Question

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

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

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

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

知道如何解决这个问题并确保所有这些浏览器的一致性吗？

编辑:我正在使用 jQuery 1.11.1

Answer 1

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

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

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