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

Question

有人会认为在jQuery之后，#foo选择的div的宽度根本不会改变；毕竟，我们将此宽度设置为它应该已经拥有的值:

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

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

<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 ，它使用与上面所示完全相同的代码，所有 div 最终都具有相同的宽度。一方面，这很好:结果具有预期的外观。另一方面，jsFiddle 的结果并不代表浏览器直接生成的结果这一事实与 jQuery 的行为一样令人费解。

我的问题是:

1. 这是 jQuery 中的错误，还是这种令人费解的行为以某种方式符合 CSS 规范？

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

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

Answer 1

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

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

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

这个返回值被应用为两个 div 的宽度，但是因为一个 div 有 box-sizing: border-box 而另一个没有，一个 div 变得比另一个大。

如果您将宽度设置为原始宽度并使用$(document).ready ( http://bugs.jquery.com/ticket/14084 ):

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