Можно было бы подумать, что после следующего разряда jQuery
ширина div
, выбранная #foo
, не изменилась бы вообще; В конце концов, мы устанавливаем эту ширину до значения она якобы уже имеет:
var original_width = $('#foo').css('width');
$('#foo').css('width', original_width);
На самом деле, это разумное предположение, кажется, не так, как показано в этом page. Я даю код ниже. Важно отметить, что четыре основных раздела, соответствующие четырем .level-0
div
, все имеют одинаковую структуру и контент. Второе и четвертое из них (которые имеют класс 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, а также в этой должности) в соответствии с приведенным в ответ Марко Biscaro в; это не имело никакого отношения к появлению страницы, отображаемой непосредственно браузером, но это повлияло на внешний вид результата jsFiddle. Теперь последний не показывает разницы в ширинах различных div. Этот результат по-прежнему отличается от того, который создается непосредственно браузером, поэтому ситуация не намного лучше, чем раньше: у нас все еще есть, что jQuery производит неожиданные результаты, а jsFiddle дает результаты, которые не соответствуют результатам браузера.
умирала, чтобы оставить «лол», но я предпочитаю быть конструктивным .. :) Может быть, у вас есть прослушивается до сброса CSS? Пробовал это с разными браузерами? Некоторые браузеры имеют тенденцию делать расчетные ширины –
Вы никогда не устанавливаете widht, поэтому jQuery пытается получить его в любом случае и, вероятно, использует outerWidth, поскольку он получает ширину, включая дополнение. Использование '$ ('. Jqbug'). Width()' получает правильное значение – adeneo
@adeneo Почему бы вам не опубликовать это как ответ? Кажется довольно законным для меня. –