2012-01-04 2 views
1

Сравнивая HTML4 с HTML5, я сталкиваюсь с необычной проблемой при размещении нарезанных изображений на моем сайте.Weird HTML5 нарезанный край изображения верхний и нижний номер

Посмотреть примеры страниц ниже:

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

p.s. единственное отличие этих двух файлов - объявление DOCTYPE заголовка.

ответ

2

Добавить img {vertical-align: bottom;} в ваш CSS.

+0

лото! но зачем это нужно? – Raptor

+1

Поскольку по умолчанию изображения выровнены по тексту, это означает, что они должны содержать пробел под строкой для букв, таких как 'q'. Используя «bottom», когда выравнивание выравнивает изображения в нижней части строки. Единственный раз, когда вы столкнетесь с проблемами, является то, что высота изображения меньше высоты текста (свойство 'line-height'). –

0

Попробуйте удалить Высота & Ширина из таблицы & ГИМ

+0

не работал, извините. – Raptor

0

Добавить img { display: block; } в свой CSS. HTML5 приведет к тому, что браузеры будут обрабатывать встроенные элементы немного по-разному для HTML4.

Для получения дополнительной информации см этой информативной статья от Mozilla: https://developer.mozilla.org/en/Images%2C_Tables%2C_and_Mysterious_Gaps

Смежные вопросы