Можно подумать, что после следующего бит jQuery
ширина div
, выбранная #foo
, не изменилась бы вообще; в конце концов, мы устанавливаем эту ширину в значение, которое оно якобы уже имеет:
var original_width = $('#foo').css('width');
$('#foo').css('width', original_width);
Фактически, это разумное предположение кажется неправильным, как показано на этой странице . Я даю код ниже. Важно отметить, что четыре основных раздела, соответствующие четырем .level-0
div
s, имеют одинаковую структуру и контент. Второе и четвертое из них (которые имеют класс 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, который использует точно такой же код, как показано выше, все div
имеют ту же ширину. С одной стороны, это хорошо: результаты имеют внешний вид, которого можно было бы ожидать. С другой стороны, тот факт, что результат jsFiddle не является репрезентативным для того, что производит браузер напрямую, так же озадачен, как поведение jQuery.
Мои вопросы:
-
Является ли это ошибкой в jQuery или это загадочное поведение каким-то образом согласуется с спецификацией CSS?
-
Что нужно сделать, чтобы получить результат jsFiddle, похожий на результат, созданный браузером?
EDIT: я изменил JS (как на странице, указанной выше, так и на jsFiddle, а также в этом сообщении), чтобы соответствовать тому, что было дано в ответе Марко Бискаро; это не имело никакого отношения к появлению страницы, отображаемой непосредственно браузером, но это повлияло на внешний вид результата jsFiddle. Теперь последний не показывает разницы в ширинах различных div. Этот результат по-прежнему отличается от того, который создается непосредственно браузером, поэтому ситуация не намного лучше, чем раньше: у нас все еще есть, что jQuery производит неожиданные результаты, а jsFiddle дает результаты, которые не соответствуют результатам браузера.