Удаляем лишний отступ в IE при использовании clear: both
Часто, когда мы используем плавающие блоки, для того, чтобы нижеследующий блок расположить под ними без смещения вверх за счет флоатов, мы создаем дополнительный html-элемент, к которому применяем свойство clear: both, например, так, как это сделано в трехколоночном макете с помощью CSS:
.clear {clear: both}
В ряде случаев между самым высоким плавающим блоком и нижеследующим не плавающим (например, между контентом и футером) в браузере Internet Explorer, в том числе и в 7-й версии, появляется лишний отступ, образованный этим самым свойством clear: both. Грешит, я так полагаю, именно IE, поскольку в современных браузерах (Opera, FireFox, Safari) данные блоки отображаются так, как надо, т.е. без лишних “не задуманных” отступов.
Сей эффект бывает особенно заметен в случае, если к описанным блокам заданы видимые бордюры, различные изображения или разноцветные бэкграунды.
Вот реальный пример с лишним отступом в IE. Здесь на его наличие повлиял margin, заданный для хэдера страницы (кстати, привет Trifler‘у, этот пример я выцепил в одном из твоих шаблонов :).
Чтобы устранить данный недочет в Internet Explorer, нужно задействовать всего пару дополнительных CSS-правил. Решение очень простое — указываем клир-контейнеру нулевую высоту и скрываем его переполнение:
.clear {
clear: both;
height: 0;
overflow: hidden;
}
В результате IE “пляшет” по нашим правилам.
* * *
На сайте «Personal Turkey» вы можете подобрать и купить недвижимость в Турции. Одно дело — снимать номер в отеле, совсем другое — быть владельцем недвижимости в этой замечательной южной стране.
Смотрите также
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
CSS-трюк: IE, таблица и "резиновые" изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems«. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Комментарии (24)
Мой конечно рабочий. Пример-то на что дан?
Привет, Дима.
Сейчас, тоже перехожу на этот метод.
Победить IE не просто ;)
Но еще жив курилка ;)
Дмитрий, добрый день! Может я чего не то делаю, но по кнопочке «Читать через Яндекс» твой фид в мою ленту не добавляется категорически. Я-лента съела только фидбурнеровский фид. Но это так, лирика :) А теперь по теме — спасибо за разжеванную кашу, буду есть :) Если не против, есть пара вопросов по резиновой верстке. Хочу отцентровать двухколоночную резину. В ФФ и ИЕ7 все работает, но тухнет на шестом ИЕ — он растягивает на всю ширину страницы. Башку сломал уже, что с ним делать. Если не лень, посмотри, плиз, вот на эту страничку — http://tokenoman.ru/layout.html Там есть еще одна печаль с шестым эксплорером, но это уже так, мелочи :) Спасибо! ;)
Привет, Бомж2 :)
Так это нормально :), мой фид же через него как раз и пропускается, поэтому идет редирект.
По поводу всего остального отвечу примерно вечером в воскресенье, до этого времени меня не будет.
Обычно делают так .clear {clear: both; font-size:0;line-height:0}
Yuriy, я ж говорю — не работает этот способ. Проверьте на моем примере.
Да, действительно, в Вашем примере не работает. Но тогда есть еще один способ :) Для этого необходимо div’ы content и right взять в div «обертку» и ему задать width:100% и overflow:hidden. Тогда необходимость в div’е c clear:both отпадает и отступа тоже нет.
Yuriy, в макетах, которые я верстаю, content и right как раз всегда обернуты в див со 100% шириной, но overflow для него я никогда не применял, поэтому спасибо за метод, обязательно попробую ;).
О, сработало! Вчера весь вечер промучилась, не знала что делать, а тут за минуту помогло. Спасибо большущее!
Пожалуйста, Existenciya.
.clear-invisible {clear: both; height: 0; overflow: hidden; font-size: 0; padding: 0px; margin: 0px; line-height: 0; width: 100%}
*+html .clear-invisible {clear: none}
* html .clear-invisible {clear: none}
У кого не сработали все предыдущие способы — даю самый рабочий :)
Для IE срабатывает комбинация width: 100% и clear: none (эмулируя clear: both)
Причем у меня все вышеописанные способы не срабатывали.
antoxa! Спасибо огромное! Я уж не чаял надежды победить ослов… Причем описанный dimox’ом метод меня всегда выручал, а тут столкнулся с необходимостью, после каждого второго дива делать clear… И никак ослы не хотели меня понять (перед первым clear делали отступы, как будто у него маржин или паддинг прописан, а остальные как надо складывали..впрочем это я уже разошелся на радостях.. спасибо) =)
Что-то знакомое. Мне однажды показывали подобный глюк. А вот width: 100% и clear: none никогда не пробовал, поэтому теперь буду иметь в виду. antoxa, спасибо! ;)
Спасибо огромное за статью.
Сделала сайт по шаблону и движку Joomla и старый шаблон меняла под свой дизайн. Просто измучилась с различным отображением в других браузерах и IE. А в коде уже был прописан .clear {
clear: both;}, я вообще не понимала зачем это прописано. Добавила туда то, что вы советуете и моя проблема с различным отображением в браузерах решилась.
Спасибо!!!
я вот для себя вывел самое рабочее решение…пока не подводило
.clear {
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
Спасибо-попозже потестирую)
Вот универсальный способ:
=========CSS===========
.clearbar {
clear:both;
font-size:0;
line-height:0;
border:none;
height:0;
}
=======================
========HTML==========
=======================
ВАЖНО!
Если написать просто (без пробела), то в ie6 высота будет все равно 2 пиксела :)))
Был замечено, что line-height:0; вызывает в IE8 однопиксельный пробел все-таки, в то время как в 6-7 нормал. Удалил стало везде хорошо. Может конечно специфика мудреной верстки где применял это была такая, но тем не менее.
Огромное спасибо, помогло
Спасибо,
способ работает!
overflow:hidden; само по себе уже очищает текущий контекст, без всяких clear