Разница в расчете высоты между IE7 и Firefox / Safari

Question

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

У меня есть это в моем CSS:

#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;   
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}

и назовите это здесь в моем HTML:

<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<a href="recipient.html"><img src="images/2010_headshot.jpg" alt="foo" /></a>
</div>

Довольно просто, верно? В Firefox он визуализируется примерно на 20 пикселей длиннее, чем в IE7 (я могу сказать, где нижняя часть этого элемента находится рядом с другими элементами на странице). Я работаю в стандартном режиме и посмотрел на версию Firefox в Firebug и версию IE с Firebug Light и панелью инструментов IE Dev - тоже не вижу ничего странного ... верхняя часть div начинается справа пятно, так что это не похоже на разрушение поля ...

Если я вручную добавлю отступ / высоту в CSS, я смогу заставить IE7 выровнять его на нужной высоте, но тогда div в Firefox слишком длинный! Это не критичная часть дизайна, но это отвлекает от меня!

Заранее спасибо ...

Answer 1

Это IE, и он обрабатывает поля по умолчанию h3 внутри плавающего элемента

. Обычно это можно исправить, задав явный элемент (любой элемент с полями по умолчанию!) явный поля, но в этом случае это не работает из-за верхнего заполнения контейнера?

Лучшее исправление, которое я могу придумать, это удалить верхнее заполнение из #recipient div и явного;y сделать верхнее / нижнее поля в h3 11px , это дает хорошие четные пробелы в эффекте (кстати, этот дополнительный бит происходит только в том случае, если div выше минимальной высоты) - вот некоторые рабочиекод - я также поместил цвет фона на h3, который, если вы сделаете это в своем коде, будет показывать дополнительный разрыв в 15px.

CSS:

#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;   
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}

h3 {
 margin: 11px 0; /* explicitly set these */
 background: #fcf;
}

HTML: (с изображением-заполнителем для тестирования)

<div id="recipient">
  <h3>Meet the 2010 Recipient!</h3>
  <a href="recipient.html"><img src="http://placekitten.com/350/200/" alt="foo" /></a>
</div>