Найти элемент, растягивающий веб-страницу?

Я делаю некоторую работу для http://digitaleditor.com/ и наткнулся на что-то немного запутанное.

Веб-страница имеет горизонтальную полосу прокрутки внизу, но я не мог понять почему. Используя инструменты разработчика Google Chrome, я обнаружил, что на всей странице есть только 3 элемента, ширина которых превышает 960 пикселей. Первые два - это html и body, второй - #hpages, однако ширина второго составляет всего 970 пикселей (ширина каждого html и body составляет 1263 пикселя). Кроме того, существует очень очевидное правило CSS, растягивающее #hpages до 970 пикселей:

#hpages ul {   width:970px; float:right; }

Я не могу найти такого правила, растягивающего элементы html или body. Я попытался запустить следующий скрипт, чтобы увидеть, есть ли какие-то элементы, которые я просто не замечаю, которые могут растягивать страницу:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

Это вернуло #hpages, что означает, что ни один элемент в теле не имеет ширины более 970 пикселей (даже если тело растянуто до 1263 пикселей).

Нет правил CSS, влияющих на ширину элемента body или ширину элемента html.

Честно говоря, я просто не понимаю, что растягивает страницу, и я не знаю, как это понять. На данный момент мое последнее средство - систематическое удаление элементов со страницы, пока проблема не будет устранена. Мне было интересно, знает ли кто-нибудь лучший вариант.


html css width stretch
person stevendesu    schedule 31.10.2011    source источник
comment
Является ли домашняя страница сайта ссылкой на пример? Потому что в настоящее время для меня он не прокручивается по горизонтали с окном просмотра 1000 пикселей в Chrome / Mac.   -  person millimoose    schedule 01.11.2011
comment
Не отображается горизонтальная полоса прокрутки в Chrome (последняя версия).   -  person deviousdodo    schedule 01.11.2011
comment
Я использую Chrome 14.0.835.202, а владелец сайта использует FireFox 7.0.1, и мы оба видим горизонтальную полосу прокрутки. В моем браузере установлено максимальное разрешение 1280х1024. Тестирование в Internet Explorer 9 и Safari 5 также дало мне горизонтальную полосу прокрутки. Может ли это быть из-за Windows, если она не отображается на Mac?   -  person stevendesu    schedule 01.11.2011
comment
Существуют ли другие правила CSS, влияющие на #hpages? Любые отступы / поля?   -  person Furbeenator    schedule 01.11.2011
comment
@Furbeenator: Абсолютно ничего. Взглянул, и это 0 полей, 0 отступов, 0 границ.   -  person stevendesu    schedule 01.11.2011

Ответы (3)


arrow_upward
5
arrow_downward

Это ширина окна iframe в .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8

Он имеет встроенный стиль width: 575px;, который переполняется. Либо исправьте ширину, либо добавьте overflow: hidden; в этот div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">

person Steve Robbins    schedule 31.10.2011
comment
Я понятия не имею, как вы это догадались, но это кажется законным. Я изменю и посмотрю, что будет - person stevendesu; 01.11.2011
comment
Iframe создается javascript, хранящимся на серверах Facebook, хотя я добавил overflow:hidden к содержащему объекту div, который у меня есть, и проблема все еще не решена. ИЗМЕНИТЬ - хотя удаление кнопки «Нравится» в Facebook полностью устранило проблему с прокруткой, поэтому вы точно определили нужный элемент. Все, что мне сейчас нужно, это решение. И желательно понимание того, как вы в этом разобрались. - person stevendesu; 01.11.2011
comment
@steven_desu не содержащий div, а тот, который его содержит, с абсолютным позиционированием на нем. Если это не сработает, вы можете дать ему left: -575px;, и это должно иметь тот же эффект. Я понял это с помощью элемента Inspect в Opera. - person Steve Robbins; 01.11.2011

arrow_upward
0
arrow_downward

На странице есть ссылка на:

<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />

На этой странице есть:

/* ===================== _HEADER STYLES ======================== */ 
#hpages ul {   width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }

Не уверен, но, возможно, наличие margin-right на li может вызвать их переполнение. Вы можете захотеть перезаписать этот стиль с помощью CSS на своей странице. Не уверен, есть ли у вас доступ для этого, но это может быть вариант.

person Furbeenator    schedule 31.10.2011
comment
Это хороший улов, но правое поле применяется к элементам li, каждый из которых имеет ширину около 60–100 пикселей. А их всего двое. Эти li элементы далеки от переполнения страницы. - person stevendesu; 01.11.2011
comment
Но если они плавают вправо и имеют поле, они могут выходить за правую границу своего родительского элемента. - person Furbeenator; 01.11.2011

arrow_upward
-1
arrow_downward

Удалить position:relative; из .wrapper

person Maverick    schedule 31.10.2011
comment
Положение при снятии: относительное; невозможно, так как на странице много абсолютно позиционированных элементов, зависящих от него. - person stevendesu; 01.11.2011