Почему HTML5 DOCTYPE смешивает с моим дополнением?
У меня есть html5 страница с navbar. Полностью царапина кодируется. Я просто недавно добавил doctype к объекту, и теперь я получаю дополнительное пространство под своим navbar. Если я удаляю doctype объявление, оно возвращается к нормальному. Я полностью сбросил дополнение, поля, и т.д. на всем, и сократил его к небольшой объем кода, который иллюстрирует проблему.
Страница видна по http://hackthetruth.org/webdesign/broken
Кто-либо знает, почему объявление doctype смешивает с высотой отделения?
4 ответа
Это потому, что DOCTYPE меняет режим рендеринга на режим соответствия стандартам. В частности, это означает, что теперь вы используете W3C Box Model, которая рассчитывает ширину/высоту для блочных элементов иначе, чем режим quirks.
У меня была такая же проблема с одним из моих сайтов. я нашел этот ответ здесь :
«С доктипом HTML5 изображения получают то, что кажется атрибутом line-height, который обычно получает текст, и, таким образом, вы получаете« поле »под ними. Вы можете либо установите для них display: block, либо line-height: 0, хотя я не тестировал последнее в достаточной степени, чтобы убедиться, что это хорошее исправление »
Я применил line-height: 0 к
Приятель, у вас есть 2 случайных
Я никогда не использовал display: inline-block из-за проблем с IE7, поэтому я не знаком с его причудами. Кажется, нет необходимости применять его к ul # pagetab в вашей ситуации, поскольку он не окружен встроенными элементами. Я бы просто преобразовал его в обычный блочный элемент. Более того, поскольку он содержит плавающие элементы, которые не нуждаются в перемещении рядом с некоторыми встроенными элементами, я бы просто дал ul # pagetab реальную высоту через display: block; переполнение: скрыто; .
Похоже, это решает все ваши проблемы (которые я не могу объяснить в деталях) и предоставляет стилистически более подходящие стили.