2013-12-21 24 views
10

Можно было бы подумать, что после следующего разряда jQuery ширина div, выбранная #foo, не изменилась бы вообще; В конце концов, мы устанавливаем эту ширину до значения она якобы уже имеет:

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

На самом деле, это разумное предположение, кажется, не так, как показано в этом page. Я даю код ниже. Важно отметить, что четыре основных раздела, соответствующие четырем .level-0div, все имеют одинаковую структуру и контент. Второе и четвертое из них (которые имеют класс 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.

Мои вопросы:

  1. Является ли это ошибка в JQuery, или это озадачивает поведение каким-то образом в соответствии с CSS спецификации?

  2. Что нужно сделать, чтобы получить результат, созданный jsFiddle, похожим на результат, созданный браузером?

EDIT: Я изменил JS (как на странице связаны выше и jsFiddle, а также в этой должности) в соответствии с приведенным в ответ Марко Biscaro в; это не имело никакого отношения к появлению страницы, отображаемой непосредственно браузером, но это повлияло на внешний вид результата jsFiddle. Теперь последний не показывает разницы в ширинах различных div. Этот результат по-прежнему отличается от того, который создается непосредственно браузером, поэтому ситуация не намного лучше, чем раньше: у нас все еще есть, что jQuery производит неожиданные результаты, а jsFiddle дает результаты, которые не соответствуют результатам браузера.

+0

умирала, чтобы оставить «лол», но я предпочитаю быть конструктивным .. :) Может быть, у вас есть прослушивается до сброса CSS? Пробовал это с разными браузерами? Некоторые браузеры имеют тенденцию делать расчетные ширины –

+2

Вы никогда не устанавливаете widht, поэтому jQuery пытается получить его в любом случае и, вероятно, использует outerWidth, поскольку он получает ширину, включая дополнение. Использование '$ ('. Jqbug'). Width()' получает правильное значение – adeneo

+0

@adeneo Почему бы вам не опубликовать это как ответ? Кажется довольно законным для меня. –

ответ

1

У вас есть два разных div с тем же классом. Когда вы делаете:

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

Ширина одного из дивы возвращается (я не знаю точно, как JQuery определяет, какой из двух). На вашей размещенной странице возвращается значение 234px, тогда как в jsFiddle значение равно 274px (опять же, я точно не знаю почему). Вот почему поведение отличается от двух страниц.

Это возвращаемое значение применяется как ширина обоих div, но поскольку у одного div есть box-sizing: border-box, а у другого нет, один div становится больше, чем другой.

JQuery не будет изменять ширину любого DIV, как и следовало ожидать, если вы установите ширину в качестве исходной ширины и использовать $(document).ready (http://bugs.jquery.com/ticket/14084):

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

«jQuery не изменит ширину любого div, как ожидалось»: это утверждение неверно вне jsFiddle; Я изменил код в соответствии с тем, что вы разместили, а второй 'div' по-прежнему имеет свою ширину. См. Мой EDIT выше. – kjo

+1

@kjo Это работает, если используется '$ (document) .ready'. Это ошибка jQuery –

+1

@ MarcoBiscaro: Я не могу вас поблагодарить! Сегодня я перехожу из одной бессмысленной ситуации в другую. Ваш пост - первое, что имело смысл весь день ... – kjo

0

Эта проблема вызвана тем фактом, что первый div имеет пограничный ящик css-класса на элементе более высокого уровня, который имеет разную ширину и второй элемент, в котором родительский элемент не имеет на нем пограничного поля.

Приграничный шкаф имеет установленную на нем модель размеров. Это означает, что он принимает ширину + дополнение.

Это приводит к перегрузке встроенной ширины, заданной jquery.

0

Просто возьмите outerWidth, это будет рассчитать фактическую ширину, включая дополнения и границы

var original_width = $('#foo').outerWidth();