Почему IE7 при очистке с плавающей запятой приводит к ошибке маржи?
У меня очень простая 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 из контейнера, но все не идеально. Почему число с плавающей точкой, за которым следует абзац, вызывает это дополнительное верхнее поле только в IE7?
Ответы 4
Я вижу лишние пробелы в 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.
Могу я предположить, что у вас есть документ-тип?
Однако измените h2 и span на display: inline; также должен прояснить вашу проблему.
Изменить --- добавление hasLayout
Понимание того, что встроенный не всегда вариант, вот статья, объясняющая, что происходит.
По сути, вы должны предоставить <p> hasLayout. Есть много способов сделать это, и мне не нравится использовать <div class = "clearall"></div>, и я предпочитаю использовать overflow: hidden; или zoom: 1;.
Наш тип документа - XHTML 1.0 Strict (и проверяет @ W3C).
Display: inline очищает его, но не позволяет нам использовать float перед p, что нам нужно в некоторых ситуациях.
Отредактировано, чтобы добавить ссылку на объяснение / решение
Еще одно замечание - это отступ 30 пикселей в .news-result, который дублирует IE7, поэтому, если вы найдете другой способ добавить отступ (второй div?), Вы тоже будете хороши в этом.
Боюсь, что IE7 - это по-прежнемуплаватьпрослушивается.
(исправления по ссылкам)
Нежелательной кажется верхняя граница поля, а не нижняя граница, которая не отображается.
Просто добавьте между плавающим DIV и очищающим div. Это устранит разрыв.
Использование css reset ala Eric Meyer: meyerweb.com/eric/gotits/2007/05/01/reset-reloaded поможет свести к минимуму некоторые различия в браузере, с которыми вы можете столкнуться.