При увеличении размера Jquery ширина сайта превышает 100%.

Question

рассматриваемый файл; http://channel5.co.nz/testing/ извините за долгую загрузку, JPEG еще не был полностью оптимизирован.

У меня проблема с тем, как суперразмерный ползунок добавляет элемент в DOM, firebug говорит мне, что проблемным элементом является тег, который оборачивает тег img внутри сверхразмерных нагрузок ul.

Кажется, я не могу изменить CSS так, чтобы это исчезло.

Любое понимание будет с благодарностью!

Answer 1

Попробуйте изменить #supersized css на это:

#supersized {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
position: absolute; 
left:0; top:0; 
margin:0px; 
overflow:hidden; 
z-index:-999; 
height:650px; 

width: 100%; }

(используется декларация CSS3 box-model)
Блочная модель по умолчанию добавляет любые отступы или поля к вычисляемой ширине контейнеров; например в этом примере объявлено следующее правило:

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }

Что делает вычисленную ширину 100% + 40px.

Возможно, вы также непреднамеренно нацелены на #supersized ul с этим правилом. Тогда вам нужно только добавить padding: 0; к правилу #supersized.

Для объяснения того, как работает блочная модель и почему она установлена ​​на content-box по умолчанию, отметьте http://www.quirksmode.org/css/box.html