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