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

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

Следующий код, который использует таблицу стилей сброса Yahoo, чтобы убрать все отступы браузера по умолчанию, оставляет зазор примерно в 4 пикселя между двумя изображениями ниже, но ТОЛЬКО когда я использую строгий 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>

css doctype xhtml
person Simon_Weaver    schedule 29.01.2009    source источник

Ответы (7)


arrow_upward
15
arrow_downward

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

img { vertical-align: bottom }

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

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

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

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

person Allain Lalonde    schedule 29.01.2009
comment
это имело смысл - и это тоже работает. какие-либо известные побочные эффекты этого? Думаю, я увижу, будут ли какие-нибудь другие мои изображения выглядеть не в том месте, когда я подхожу к нему. единственное, что меня интересует, это то, есть ли у меня когда-либо встроенные изображения в тексте, такие как маркеры, но тогда я всегда могу использовать базовую линию там - person Simon_Weaver; 29.01.2009
comment
обязательно прочтите статью, упомянутую ionut (developer.mozilla.org/en/Images , _Tables, _and_Mysterious_Gaps). он очень подробный и говорит о будущем исправлении - person Simon_Weaver; 29.01.2009

arrow_upward
7
arrow_downward

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

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

person Ionuț G. Stan    schedule 29.01.2009

arrow_upward
3
arrow_downward

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

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

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

person Peter Boughton    schedule 29.01.2009
comment
хорошо, что работает. Я НЕНАВИЖУ это подумал! это лучшее, что я собираюсь получить? Интересно, что установка font-size: 1 или font-size: 1000 дает пробел того же размера - person Simon_Weaver; 29.01.2009
comment
видеть, что этот разрыв исчезает, - большое облегчение. и даже БОЛЬШЕ облегчения увидеть, что пробел на моем фактическом сайте исчез. Мне очень любопытны любые другие решения, поэтому пока я оставлю вопрос без ответа - person Simon_Weaver; 29.01.2009
comment
о, и я не имел в виду, что ненавижу ваш ответ - я просто имел в виду - ну, вы знаете :-) Я просто перечитал свой комментарий и подумал, что звучал немного неблагодарно! - person Simon_Weaver; 29.01.2009
comment
Не волнуйтесь - я понимаю, о чем вы. :) - person Peter Boughton; 29.01.2009

arrow_upward
2
arrow_downward

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

person Marco Luglio    schedule 29.01.2009

arrow_upward
0
arrow_downward

Пытаясь исключить распространенные ошибки, я провел проверку кода, исправив не менее 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>
person Allain Lalonde    schedule 29.01.2009
comment
спасибо - хоть и не работает. я должен иметь привычку делать такие вещи - person Simon_Weaver; 29.01.2009
comment
это не обычная проблема? большинство запросов по этой проблеме просто дают совет о том, как везде установить отступ на 0 - что я и сделал - person Simon_Weaver; 29.01.2009

arrow_upward
0
arrow_downward

Решение display: inline-block определенно не сработало для меня.

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

person oyvey    schedule 20.04.2012

arrow_upward
-1
arrow_downward

Переход на свободные стандарты вместо строгих сработал для меня ... сохранил нужное мне форматирование 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">
person pcamis    schedule 17.05.2012