jQuery width（）和outerWidth（）产生奇怪的结果

Question

有人可以解释为什么HTML

<div class="div">This is a normal DIV</div>

jQuery

$('.div').width("50%");

and

$('.div').outerWidth("50%");

产生如此奇怪的结果？我已经尝试过这个通常定位的DIV，绝对定位的DIV，以及有和没有CSS

box-sizing: border-box;

当没有设置border-box时，我正在用 outerWidth（“50％”）压缩DIV（即最小宽度），并且宽度的宽度大于预期的DIV（设置边框时，“50％”）。 （FWIW，位置：绝对似乎没有区别。）

请参阅https://jsfiddle.net/zk1gys7z/1/

Answer 1

我无法用JS解释那里发生了什么，它似乎总是应用50％，我看到应用的样式分别是8％，92％和其他奇怪的值。

我认为你会得到你正在寻找的结果：

$('.div').css("width", "50%");

如果应用border box，则会将填充考虑在内，不会将内容大小设为50％（填充将是额外的）