Строгий документ, влияющий на интервал между изображениями
Вопрос
У меня возникли проблемы с интервалом между изображениями, когда я переключился на XHTML Strict DOCTYPE.
Следующий код, который использует таблицу стилей сброса Yahoo, чтобы удалить все отступы браузера по умолчанию, оставляет разрыв примерно в 4 пикселя между двумя изображениями ниже, но ТОЛЬКО когда я использую strict doctype.Почему это происходит?
Это проблема только в Chrome и Firefox.IE не показывает ни одного пикселя между двумя изображениями.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
</body>
</html>
Решение
Используя ответ Питера в качестве отправной точки, следующее устраняет проблему:
img { vertical-align: bottom }
Причина, по которой это работает, заключается в том, что по умолчанию для vertical-align
является baseline
, что соответствует части текста "над строкой", где висячие биты свисают вниз (строчные буквы g, q и т.д. Все висят ниже этой базовой линии).
Таким образом, чтобы освободить место, оставалось 4 пикселя пространства для этих выступов.
Надеюсь, это имело смысл.
Редактировать:Наглядное пособие от исходный сайт
(источник: brightlemon.com)
Другие советы
Более подробную информацию о пробелах в изображениях misterious можно найти здесь:
https://developer.mozilla.org/en/Images ,_таблицы,_и_мистерические_гапсы
Используя Поджигатель показывает, что именно DIV вызывает интервал, а не изображение.
Я устанавливаю размер шрифта:0;для верхнего div, и пробел исчезнет.
(Как ни странно, есть / должен быть унаследованный размер шрифта: 0;из тела в reset-min.css, поэтому не уверен, почему это сработало.)
В строгих типах документов изображение становится встроенным элементом и ведет себя как текст.Следовательно, вам нужно изменить его vertical-align
свойство или измените его свойство отображения на display: block
, или display:inline-block
Пытаясь исключить распространенные ошибки, я заставил код пройти проверку, исправив не менее 8 ошибок проверки.
Как правило, если браузер не может проанализировать документ в указанном DOCTYPE, результаты не указаны.
Имейте в виду, это все еще не работает, но вот код проверки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
<title>Required</title>
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>
</body>
</html>
Решение display: inline-block определенно не сработало для меня.
Решение "выровнять по вертикали: снизу" действительно сработало, но с одной оговоркой:в зависимости от ситуации, были изображения, которые мне приходилось вместо этого устанавливать на выравнивание по вертикали: сверху
Переход на свободные стандарты вместо строгих сработал для меня...сохранил форматирование IE, которое мне требовалось, но устранил нечетные интервалы между изображениями в Firefox и Chrome.
https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode
Использовал линию:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">