HTML5 Doctype увеличивает высоту DIV - PullRequest
Новая
       4

HTML5 Doctype увеличивает высоту DIV

5 голосов
/ 15 июля 2011

При отображении страницы в Chrome, Safari или Firefox на Mac, если я использую тип документа HTML5 

<!DOCTYPE html>

и поместите изображение в div, div будет отображаться на 4 пикселя слишком высоко. Если я использую старый тип документа 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Div отображаются правильно, что соответствует высоте изображения внутри. Это использует точно такой же код HTML и CSS. Единственное, что меняется, - это тип документа, и появляются дополнительные 4 пикселя. Есть ли способ это исправить?

Ответы [ 2 ]

10 голосов
/ 15 июля 2011

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html> = Режим стандартов - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> = Режим почти стандартов - http://jsbin.com/ogacor/2

Чтобы исправить это, добавьте display: block или vertical-align: top (или bottom) к img.

Причина, по которой это происходит в первую очередь, заключается в том, что img s по умолчанию являются inline элементами и имеют значение по умолчанию vertical-align, равное baseline. Базовая линия не касается дна содержащего элемента - зазор - это расстояние между ними.

См:

1 голос
/ 15 июля 2011

HTML5 указывает, что пробелы в элементах должны отображаться.Таким образом, вы получите дополнительные 4 пикселя, например, если для этих элементов установить размер шрифта равным 0, пространство исчезнет.

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

Нет похожих вопросов

...