Почему высота DIV, содержащих изображения, увеличивается на 4,5 пикселя?

Question

Этот div будет иметь вычисленную высоту 104,5 пикселя (в самых последних версиях Chrome, FF и IE)

<div><img src="" height="100px" /></div>

Этот div будет иметь вычисленную высоту 100px

<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>

Я использовал FireBug для просмотра DIV и IMG, и оба IMG имеют 0 для полей, отступов и границ, но в первом случае вычисленная высота как-то в 4,5 раза больше.

Почему это? Это влияет на меня, когда я пытаюсь расположить страницу с последовательной вертикальной сеткой. В идеале я бы не хотел, чтобы плавающие imgs.

Я попытался посмотреть здесь ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 и даже попробовал vspace = 0, но это ничего не изменило.

Спасибо за вашу помощь!

Answer 1

клиенты включают свои собственные таблицы стилей, которые должны быть переопределены перед тем, как вы попытаетесь выполнить макеты с идеальной точностью пикселей или отладку между браузерами. Даже если вы удалите все таблицы стилей, на странице все еще есть стили.

Попробуйте еще раз с помощью css reset в верхней части таблицы стилей. Также убедитесь, что вы объявляете действительный тип документа. Используйте строгий тип документа и убедитесь, что ваш код проверяется, если это по-прежнему не помогает.

Я обычно использую веб-сброс meyer с небольшими изменениями, которые подходят для моего рабочего процесса.

Если другие люди видят 100px, то, скорее всего, это проблема на стороне клиента, так что, надеюсь, это поможет вам.

Answer 2

Ищите определение высоты строки на высоком уровне применительно к элементу div, который содержит только изображение. (например html {line-height:1.5em;})

Вам, вероятно, все еще нужна эта настройка высоты строки в целом для сброса текста по всему сайту, но попробуйте применить line-height:0 только к div, в котором ничего нет, кроме img.

http://jsfiddle.net/kq3Yy/

Answer 3

Я использую Yahoo! CSS Reset , чтобы все мои браузеры начинали с нуля, обычно помогает.

Answer 4

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

Answer 5

Настройка <div style="display:inline" /> должна решить вашу проблему.