Пробелы внизу страницы только в IE7 и Chrome

Question

Я вижу дополнительные пробелы в самом низу этой страницы , но только в IE7 и Chrome (и, как и следовало ожидать, в IE8 в режимах IE7 и режиме совместимости). Вот как это выглядит для меня в IE7. Я изучил код, используя Firebug и панель инструментов разработчика IE, и не нашел никаких отклонений. Кто-нибудь знает, что вызывает этот пробел для конкретного браузера? Благодарю.

Answer 1

Причина, по которой вы получаете пробел, заключается в том, что вы используете относительное расположение логотипов в нижнем колонтитуле. Вместо этого используйте абсолютное позиционирование.

Относительное позиционирование смещает элементы относительно их исходного положения, но их исходное положение все еще "занято", и последующие элементы действуют так, как будто ничего не изменилось.

Таким образом, пробел вызван исходными позициями, которые занимали эти логотипы. Если вы закомментируете position: relative для всех элементов нижнего колонтитула, вы увидите, что вызывает этот пробел.

Конечно, абсолютное позиционирование - не единственный способ исправить это, но это, безусловно, самый простой. Вы также можете разместить их, использовать display: inline-block, display: table-cell, возможно, или даже по-прежнему использовать относительное позиционирование, если принять во внимание вышеприведенное (например, играть с отрицательными полями).

Answer 2

Не очень хорошая практика, но скрытое переполнение скрывает это.

Answer 3

Попробуйте удалить 100% высоты из body и html в CSS.

Я не совсем уверен, является ли это причиной, но я видел ошибки в блочной модели наряду со 100% высотой элементов, создающих подобные проблемы.

Кстати, он находится в строке 57 вашего screen.css файла.

Answer 4

Вы можете попробовать это в своем CSS:

* { margin:0px; padding:0px; }

Если это работает, проблема заключается в заполнении или полях некоторого элемента.

Кстати, я получаю пробел и в Firefox.