Почему IE7 при очистке с плавающей точкой приводит к ошибке на полях?

Question

У меня есть очень простая HTML-страница (проверяется как XHTML 1.0 Strict):

<div class="news-result">
    <h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span>
    <p>Some text...</p>
</div>

со следующим CSS:

.news-result {
    overflow: hidden;
    padding: 30px 0 20px;
}

.news-result h2 {
    float: left;
    margin: 0 10px 0 0;
}

.news-result span.date {
    margin: 1px 0 0;
    float : left;
}

.news-result p {
    padding: 3px 0 0 0;
    clear: left;
}

Отрисовка этой страницы в IE6 или FF3 отрисовывается идеально (заголовок и дата в одной строке, после которых следует абзац). Однако в IE7 между заголовком и датой и абзацем есть большой пробел.

У нас есть простой сброс, который очищает все поля и отступы для каждого элемента.

Удаление элемента с плавающей точкой в ​​элементе date устраняет эту проблему, равно как и установка zoom: 1 в абзаце или удаление overflow: hidden в контейнере, но не все идеально. Почему с плавающей точкой, сопровождаемой абзацем, запускается это дополнительное верхнее поле только в IE7?

Answer 1

Могу ли я считать, что у вас есть документ типа?

Однако измените h2 и span для отображения: inline; Также следует прояснить вашу проблему.

Редактировать --- добавить hasLayout

Понимание того, что inline не всегда возможен, вот статья , объясняющая, что происходит .

По сути, вы должны указать <p> hasLayout. Есть много способов сделать это, и я не люблю использовать <div class="clearall"></div> и предпочитаю использовать overflow: hidden; или zoom: 1;

Answer 2

Я вижу лишние пробелы в IE6, 7 и 8B2.

Похоже, что IE имеет ненулевое верхнее поле, примененное к тегу <p>.

Мне удалось удалить пробел в IE, внеся следующие изменения:

.news-result p {
    margin-top: 0;
    padding: 3px 0 0 0;
    clear: left;
}

Похоже, что это изменение не имело негативных побочных эффектов в Firefox 2 или 3, Opera 9.63 или Safari для Windows 3.2.1.

Answer 3

Просто добавьте   между плавающим DIV и очищающим дивом. Это уберет пробел.

Answer 4

Поскольку IE7 все еще float прослушивается , боюсь.

(исправления по ссылкам)