Проблема с вертикальным интервалом html5 с ![]()
Я пытаюсь создать макет, в котором вертикальное расстояние между div идеально подходит для пикселей. Пока что я исключил почти все большие сеточные системы (960.gs, Blueprint), потому что у них вообще нет решения для вертикальных интервалов. С их помощью единственный способ установить интервал по вертикали между div - это использовать атрибут body {line-height} и с его помощью управлять интервалом div. Я бы не назвал это решением, поскольку оно разрушает ваш шаблон, зависит от семейства шрифтов и не позволяет вам использовать разные интервалы для разных div.
Единственная система сеток, которую я нашел, которая имеет надлежащую поддержку вертикального интервала это Golden Grid , в котором не используется 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-код идеален до пикселя в каждом браузере, HTML5 имеет пробелы и отличается от браузера к браузеру.
Как лучше всего заставить пример HTML5 работать как переходный XHTML?
ОБНОВЛЕНИЕ : 30dot ответили на проблему, если я включу img {display: block; } версия HTML5 ведет себя точно так же, как XHTML Transitional. Спасибо, 30dot!
Но прежде чем закрыть эту ветку, может кто-нибудь объяснить мне, почему это так:
- Почему все браузеры ведут себя по-разному в режиме HTML5 и все имеют разные вертикальные промежутки между элементами img, если они не указаны как display : block. Взгляните на сайт сравнения браузера для ссылки html5 выше, она будет отличаться от браузера к браузеру. У них есть промежутки от 2 до 4 пикселей.
- Почему XHTML Transitional не нуждается в этом приеме
- Почему XHTML Strict также создает вертикальный промежуток
- Безопасно ли использовать img {display: block; } в листе reset.css?