Строгий документ, влияющий на интервал между изображениями

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

Вопрос

У меня возникли проблемы с интервалом между изображениями, когда я переключился на 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 пикселя пространства для этих выступов.

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

Редактировать:Наглядное пособие от исходный сайт
alt text
(источник: 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">
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top