Переполнение: автоматическое добавление полос прокрутки в Chrome, IE

Я использовал, чтобы добавить <div style='clear:both'></div>, чтобы очистить поплавки от предыдущих сегментов, но кто-то предложил использовать overflow:auto в <div> с поплавками вместо этого, поскольку он проще и чище.

Проблема в том, что у меня появились сообщения о том, что на моем сайте были некоторые странные "оттенки". После расследования выясняется, что это происходит в Chrome, а не в Firefox, и эти "оттенки" на самом деле очень маленькие полосы прокрутки.

Я попытался свести детали к минимуму в этом jsfiddle http://jsfiddle.net/57HM3/4/. обратите внимание, что они находятся далеко правее (где говорится "Результат" ). Кажется, что это связано с высотой линии, если я устанавливаю ее в 1.2 вместо 1.1, она исчезает. Это какая-то известная проблема (о которой я не знаю)?

Я знаю, что есть другие способы их устранения, но они связаны с конкретными кодами IE, а что нет. Я бы хотел сохранить это как есть, просто сделав div с поплавками как overflow: auto (и если это не сработает, я скорее вернусь к добавлению дополнительного <div>

Ответ 1

добавить overflow:hidden вместо. Это очистит вас обоих и не добавит прокрутки

Ответ 2

Не обезьяна с переполнением. Я бы рекомендовал решение "clearfix". Здесь, что я использую, я помещал его в начало всех моих стилей с самого начала каждого проекта:

/* CLEAR-FIX */
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

... так давно снял блог, я не могу вспомнить, где.

Любой контейнер, который должен расти с помощью float, просто нуждается в добавленном классе clearfix:

<div class="test" class="clearfix">
    <div style="float:left">Hello</div>
    <div style="float:left">World</div>
</div>

Кстати, если вам интересно, почему CSS такой, что float обычно не считается частью родительской высоты, см. Почему не плавающие родители плавающих элементов рушатся?

Ответ 3

Если вы хотите сохранить правило overflow:auto для контейнера div, вы можете попробовать удалить правило line-height из класса .test.