人们会认为,在下面这段jQuery
代码之后,选中#foo
的
宽度不会改变;毕竟,我们将其宽度设置为它本应该有的值:
var original_width = $('#foo').css('width');
$('#foo').css('width', original_width);
实际上,这个看起来合理的猜测是错误的,正如在此页面所示。我提供下面的代码。重要的是要注意,四个主要部分,对应于四个.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中,使用的代码与上面显示的完全相同,所有的最终都具有相同的宽度。一方面,这是好的:结果具有预期的外观。另一方面,jsFiddle的结果并不代表浏览器直接产生的结果,这与jQuery的行为一样令人困惑。
我的问题是:
我的问题是:
- 这是jQuery的错误还是这种令人困惑的行为与CSS规范一致?
- 需要做什么才能使jsFiddle产生的结果看起来像浏览器产生的结果?
之间的宽度没有任何区别。这个结果仍然与浏览器直接产生的结果不同,所以情况并没有比之前好多少:我们仍然有jQuery会产生令人惊讶的结果,而jsFiddle会产生与浏览器结果不匹配的结果。
$('.jqbug').width()
可以获得正确的值。 - adeneo