Строгий DOCTYPE влияет на расстояние между изображениями - PullRequest
Новая
       21

Строгий DOCTYPE влияет на расстояние между изображениями

4 голосов
/ 29 января 2009

У меня проблемы с расстоянием между изображениями, когда я переключился на XHTML Strict DOCTYPE.

В следующем коде, который использует таблицу стилей Yahoo для сброса, чтобы убрать все отступы браузера по умолчанию, между двумя изображениями ниже остается промежуток около 4 пикселей, но ТОЛЬКО при использовании строгого типа документа. Почему это?

Это проблема только в 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>

Ответы [ 7 ]

14 голосов
/ 29 января 2009

Используя ответ Питера в качестве начала, следующее устраняет проблему: 

img { vertical-align: bottom }

Причина, по которой это работает, заключается в том, что значение по умолчанию для vertical-align равно baseline, что соответствует части текста «над строкой», где свисающие биты свисают (строчные буквы g, q и т. Д. Все ниже это базовый уровень).

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

Надеюсь, это имело смысл.

Редактировать: Визуальная помощь с исходного сайта
alt text
(источник: brightlemon.com )

7 голосов
/ 29 января 2009

Более подробную информацию о загадочных пробелах можно найти здесь:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

3 голосов
/ 29 января 2009

Использование Firebug показывает, что именно DIV вызывает интервал, а не изображение.

Я установил размер шрифта: 0; для верхнего div и разрыв исчезает.

(Как ни странно, существует / должен быть унаследованный размер шрифта: 0; из тела в файле reset-min.css, поэтому не уверен, почему это сработало.)

2 голосов
/ 29 января 2009

В строгих типах документов изображение становится встроенным элементом и ведет себя как текст. Следовательно, вам нужно изменить его vertical-align свойство или изменить его свойство display на display: block или display:inline-block

0 голосов
/ 17 мая 2012

Переключение на свободные стандарты вместо строгого сработало для меня ... сохранило необходимое мне форматирование 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">
0 голосов
/ 20 апреля 2012

Дисплей: решение inline-block у меня точно не сработало.

Решение вертикального выравнивания: нижнее сработало, но с одним предостережением: в зависимости от ситуации были изображения, которые мне пришлось вместо этого установить на вертикальное выравнивание: верх

0 голосов
/ 29 января 2009

Пытаясь исключить распространенные ошибки, я прошел проверку кода, исправив не менее 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>
...