Почему IE7 при очистке float приводит к ошибке маржи?

У меня есть очень простая 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 между заголовком, датой и абзацем есть большой пробел.

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

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


html css internet-explorer internet-explorer-7
person Kamiel Wanrooij    schedule 07.01.2009    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Можно предположить, что у вас док-типа?

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

Изменить --- добавление hasLayout

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

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

person Steve Perks    schedule 07.01.2009
comment
Наш тип документа — XHTML 1.0 Strict (и проверяется @ W3C). - person Kamiel Wanrooij; 08.01.2009
comment
Display: inline очищает его, но не позволяет нам иметь число с плавающей запятой перед p, что нам нужно в некоторых ситуациях. - person Kamiel Wanrooij; 08.01.2009
comment
Отредактировано, чтобы добавить ссылку на объяснение/решение - person Steve Perks; 08.01.2009
comment
Еще одно замечание: отступ 30px в .news-result дублирует IE7, поэтому, если вы найдете другой способ добавить отступ (второй div?), у вас тоже все получится. - person Steve Perks; 08.01.2009

arrow_upward
2
arrow_downward

Я вижу лишние пробелы в 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.

person Grant Wagner    schedule 07.01.2009
comment
Использование сброса CSS в стиле Эрика Мейера: meyerweb.com/eric/thoughts /2007/05/01/reset-reloaded поможет свести к минимуму некоторые различия в браузерах, с которыми вы можете столкнуться. - person Traingamer; 07.01.2009

arrow_upward
1
arrow_downward

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

person Tommy Gagnon    schedule 30.07.2012

arrow_upward
0
arrow_downward

Поскольку IE7 — это все еще плавающий Боюсь, глючил.

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

person annakata    schedule 07.01.2009
comment
Это верхняя часть поля, которая кажется нежелательной, а не нижняя часть поля, которая не отображается. - person Kamiel Wanrooij; 08.01.2009