Html5 проблема с вертикальным интервалом с <img>

Я пытаюсь создать макет, где вертикальное расстояние между divs является идеальным пикселем. До сих пор я исключил почти все большие сетчатые системы (960.gs, Blueprint), потому что у них нет никакого решения для вертикальных расстояний. С их помощью единственный способ установить вертикальное расстояние между divs - использовать атрибут body {line-height} и манипулировать интервалом div, используя это. Я бы не назвал это решением, поскольку он разрушает ваш шаблон, зависит от семейства шрифтов и не позволяет использовать разные интервалы для разных div.

Единственная найденная сетка, которая имеет правильную поддержку вертикального интервала, Золотая сетка, которая не использует body {line-height}, но имеет собственный .clear {height: 5px} для вертикального интервала.

Моя проблема заключается в том, что независимо от того, как я пытаюсь, я не мог сделать интервал работы в HTML5. Я говорю о вертикально расположенных изображениях без разрыва между ними. В переходном режиме XHTML все работает безупречно, изображения идеально выравниваются, но в режиме HTML5 у них есть вертикальный разрыв между ними. Зазор составляет 2 пикселя в Chrome и 2-3 пикселя в Firefox, чередуясь между строками. Я думаю, что это имеет место с каждой сеткой при использовании в режиме HTML5. Я не знаю, как лучше всего писать этот код в простой HTML5, поэтому я просто попробовал сетевые системы. Вертикальный зазор присутствует в 960.gs, Blueprint тоже.

Решение, которое я обнаружил, может состоять в том, чтобы установить тело {line-height: 0} и определить высоту строки в каждом отдельном типографском теге. Но я не понимаю, почему такой простой взлом потребуется для такого простого случая: вертикально расположенные изображения. Почему браузеры отличаются в режиме HTML5, чем в переходном режиме XHTML?

Здесь у меня одна и та же страница, ничего не изменилось, просто doctype. XHTML один пиксель совершенный в каждом браузере, HTML5 имеет пробел и отличается от браузера к браузеру.

Каков наилучший способ сделать пример HTML5 похожим на XHTML-переходный?

UPDATE: тридцать ответили на проблему, если я включил img {display: block; } версия HTML5 ведет себя точно так же, как XHTML Transitional. Спасибо, тридцать!

Но прежде чем закрыть эту тему, может кто-нибудь объяснить мне, почему это:

Почему все браузеры ведут себя по-разному в режиме HTML5, и все они имеют разные вертикальные промежутки между элементами img, если они не указаны как display: block. Посмотрите в браузере, сравнивая сайт для ссылки html5 выше, он будет отличаться от браузера к браузеру. Они имеют промежутки между 2 и 4 px.
Почему XHTML Transitional не нуждается в этом хаке.
Почему XHTML Strict также создает вертикальный разрыв.
Можно ли использовать img {display: block; } в листе reset.css?

Ответ 1

Почему все браузеры ведут себя по-разному в режиме HTML5, и все они имеют разные вертикальные промежутки между элементами img, если они не указаны как отображение: block?

Прежде всего, браузеры не имеют режима "HTML5". У них есть три режима: "Quirks", "Limited Quirks" (aka Almost Standards) и "Стандарты". Существует только одна разница между режимами "Ограниченные варианты" и "Стандарты", и это относится к тому, как устанавливается высота линии и базовая линия для строки строки, в которой сидит <img>. В режиме "Ограниченные варианты" , если в строке нет отображаемого текстового содержимого, базовая линия не устанавливается, а <img> находится в нижней части строки.

В режиме "Стандарты" поле строки всегда содержит пространство для descenders символов, таких как g, p и y ниже базовой линии, даже если в этой строке нет реальных символов. Разрыв, который вы видите, - это расстояние между базовой линией и нижней частью строки строки, которая является пространством для этих descenders. Подробное описание см. В http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

Следовательно, это означает либо остановить <img>, который рассматривается как встроенный элемент { display:block; }, либо переопределить вертикальное выравнивание <img> { vertical-align:bottom; }. Будет работать.

Почему XHTML Transitional не нуждается в этом взломе

Использование XHTML Transitional doctype помещает браузер в режим "Ограниченные варианты" . Если бы вы использовали XHTML Strict или полный тип документа HTML4 Strict, вы бы увидели те же пробелы, что и вы, с помощью документа типа HTML5, поскольку каждый из них помещает браузер в режим "Стандарты".

Почему XHTML Strict также создает вертикальный разрыв

См. выше.

Можно ли использовать img {display: block; } в листе reset.css?

Конечно, но, вероятно, будут времена, когда вы захотите <img> рассматриваться как встроенный элемент. В этих случаях вам нужно добавить CSS в соответствующие места, чтобы достичь этого.

Ответ 2

Я чувствую, что это не может быть ответом, который вы ищете. Он слишком короткий:

Добавьте в CSS свою страницу HTML5: img { display: block }.

Тестирование в Firefox и Chrome, что делает пиксель идеальным идентичным рендерингом между двумя страницами.

Ответ 3

vertical-align: baseline вызывает разрыв в нижней части ваших изображений.

В строгих доктринах изображения являются встроенными элементами и ведут себя как текст. Выравнивание встроенных элементов на базовой линии заставляет их оставлять место для текстовых сокращений, даже если текста нет.

Добавление img { vertical-align: bottom } в таблицу стилей reset устранит проблему.

Ответ 4

Попробуйте этот код:

<html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
  <span>100px</span>
  <div>100px</div>
</body>
</html>

Если вы считаете, что <img> является встроенным элементом типа <span>... Я думаю, что на большинство ваших вопросов будет дан ответ.

Без атрибутов width/height ваша зависимость от каждого механизма рендеринга браузеров идентична (они не являются). Поэтому идеальный пиксель не будет работать, пока вы не сообщите браузерам, сколько пикселей использовать.