JQuery ширина() и outerWidth() производит странные результаты

Question

Может кто-то пожалуйста объяснить, почему, когда HTML является

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

JQuery

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

and 

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

производят такие странные результаты? Я попытался это с нормально расположенными DIVs, абсолютно позиционируемых DIVs, и с и без CSS

box-sizing: border-box; 

Я получаю сплющенные DIVs (то есть. Минимальная ширина) с outerWidth («50%») когда граница ящика не установлен, и более широкие, чем ожидалось, DIV с шириной («50%») при установке рамки. (FWIW, положение:. Абсолют, кажется, не имеет никакого значения)

См https://jsfiddle.net/zk1gys7z/1/

Answer 1

Я не могу объяснить, что происходит там с JS, это не всегда, как представляется, применение 50%, Я видел применяемые стили, которые составляли 8%, 92% и другие странные значения.

Я думаю, что вы получите результат, который вы ищете с:

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

С border box применяется потребуется заполнение во внимание, при этом, он будет размер только содержание, чтобы быть 50% (заполнение будет дополнительно)