html5 вертикальная пробел с <img>

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

Прежде всего, браузеры не имеют «режима HTML5». У них есть три режима: «Причуды», «Ограниченные причуды» (или почти стандарты) и режим «Стандарты». Существует только одно различие между режимами «Ограниченные причуды» и «Стандарты», и оно касается способа, которым устанавливаются высота линии и базовая линия для линейного блока, в котором находится <img>. В режиме «Ограниченные причуды», если в строке нет визуализированного текстового содержимого, базовая линия не устанавливается, а <img> располагается в нижней части строки.

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

.

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

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

Использование XHTML Transitional doctype переводит браузер в режим «Limited Quirks». Если бы вы использовали XHTML Strict или полный тип документа HTML4 Strict, вы бы увидели те же пробелы, что и в случае с типом документа HTML5, так как каждый из них переводит браузер в режим «Стандарты».

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

См. Выше.

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

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

Answer 2

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

Добавьте к CSS вашей HTML5-страницы: img { display: block }.

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

Answer 3

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

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

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

Answer 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 вы зависите от того, какой движок для каждого браузера является идентичным (это не так). Таким образом, идеальный пиксель не будет работать, пока вы не укажете браузерам, сколько пикселей использовать.