为什么$('#foo').css('width',$('#foo').css('width'))会改变宽度？

Question

人们会认为,在接下来的一点之后jQuery,所div选择的宽度#foo根本不会改变; 毕竟,我们将此宽度设置为它应该具有的值:

var original_width = $('#foo').css('width');
$('#foo').css('width', original_width);

事实上,这个合理的猜测似乎是错误的,如本页所示.我给出下面的代码.需要注意的重要一点是,对应于四个.level-0 divs 的四个主要部分都具有相同的结构和内容.它们中的第二个和第四个(具有jqbug类)具有它们的宽度"重新设置"(具有一些JS,如上所述)到它应该已经具有的值.对于第二种情况,通过此操作实际改变宽度; 对于第四种情况,宽度保持不变,如预期的那样.第二种和第四种情况的定义之间的唯一区别是前者具有border-box其box-sizing参数.

<div class="level-0 border-box">
    <div id="i1" class="level-1">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0 border-box">
    <div class="level-1 jqbug">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0">
    <div id="i1" class="level-1">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0">
    <div class="level-1 jqbug">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>

  (function ($) {
    $('.jqbug').each(function () {
      $(this).css('width', $(this).css('width'));
    });

  }(jQuery));

*{
  outline:3px solid green;
}

.border-box, .border-box *{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

.level-0{
  position:relative;
  margin:10px auto;
  width:300px;
  height:100px;
  font-family:consolas,monaco,courier,monospace;
}
.level-1{
  position:absolute;
  padding:10px 20px;
  background-color:#0aa;
  font-size:15px;
}

在这个使用完全相同的代码的jsFiddle中,所有的divs都以相同的宽度结束.一方面,这很好:结果具有人们所期望的外观.另一方面,jsFiddle的结果并不代表浏览器直接生成的事实就像jQuery的行为一样令人费解.

我的问题是:

1. 这是jQuery中的一个错误,还是这个令人费解的行为在某种程度上与CSS规范一致？

2. 需要做些什么才能使jsFiddle生成的结果看起来像浏览器生成的结果？

编辑:我修改了JS(在上面链接的页面和jsFiddle,以及在这篇文章中),以匹配Marco Biscaro的回答; 这对浏览器直接显示的页面外观没有影响,但它确实影响了jsFiddle结果的外观.现在后者显示各种div的宽度没有差异.这个结果仍然与浏览器直接产生的结果不同,所以情况并没有比以前好多了:我们仍然认为jQuery会产生令人惊讶的结果,并且jsFiddle会产生与浏览器结果不匹配的结果.

Answer 1

你有两个不同的 div 具有相同的类。当你这样做时：

$('.jqbug').css('width')

返回其中一个 div 的宽度（我不知道 jQuery 如何确定两个中的哪一个）。在您的托管页面中，返回的值是234pxjsFiddle 中的值274px（同样，我不知道确切的原因）。这就是两个页面之间的行为不同的原因。

此返回值应用为两个 div 的宽度，但由于一个 div 有 ，box-sizing: border-box而另一个没有，所以一个 div 会比另一个更大。

如果您将宽度设置为原始宽度并使用$(document).ready（http://bugs.jquery.com/ticket/14084），则 jQuery 不会按预期更改任何 div 的宽度：

$(document).ready(function () {
    $('.jqbug').each(function () {
        $(this).css('width', $(this).css('width'));
    });
});