Почему HTML5 DOCTYPE портит мой отступ?

Question

У меня есть страница html5 с навигационной панелью. Полностью скретч-код. Я только недавно добавил тип документа к элементу, и теперь у меня появляется дополнительное пространство под моей панелью навигации. Если я удалю объявление doctype, оно вернется к нормальному состоянию. Я полностью сбросил отступы, поля и т. Д. И сократил его до небольшого количества кода, который иллюстрирует проблему.

Страницу можно увидеть на http://hackthetruth.org/webdesign/broken

Кто-нибудь знает, почему объявление типа документа мешает высоте div?

Answer 1

У меня была такая же проблема с одним из моих сайтов. я нашел этот ответ здесь :

"С типом документа HTML5 изображения получают то, что кажется атрибутом line-height, который обычно получает текст, и, таким образом, вы получаете« поле »под ними. Вы можете установить отображение: блок или строку -высота: 0, хотя я не проверил последнее достаточно, чтобы убедиться, что это хорошее исправление. "

Я применил line-height:0 к <div>, который содержал навигационные изображения. Это помогло мне.

Answer 2

Это интересный и тонкий, но важный момент при использовании inline-block.

Краткий ответ: установите vertical-align на вашем ul на любое значение, отличное от baseline.

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

---

Более длинный ответ следующий:

Спецификация CSS3 в некоторой (возможно, сбивающей с толку) глубине описывает работу блочной модели.Вот цитата из спецификации блока CSS3, в которой я выделил часть, относящуюся к этой проблеме:

9.5.'Inline-block' или плавающие, незаменяемые элементы

... Используемое значение height является вычисленным значением, если только оно не равно 'auto', если используемое значение определено как '' Auto«высоты для корней потока».

Давайте проверим, каковы автоматические высоты для корней потока:

9.10.Высота 'Auto' для корней потока

В некоторых случаях (см. Предыдущие разделы) высота элемента вычисляется следующим образом:

• Если у него есть только дочерние элементы встроенного уровнявысота - это расстояние между верхней частью самого верхнего линейного блока и нижней частью самого нижнего линейного блока.

...

Детали линейного блока имеют видинтерес.Это фактически означает, что все, что установлено для отображения в виде встроенного блока, подчиняется неявным макетам блоков, которые использует простой текст.

Теперь вы можете догадаться, почему установка vertical-align устраняет эту проблему, но давайте продолжим отслеживать эту проблему через спецификацию.

Определение line-boxнемного тусклым, и пример в разделе 4.2 полезен лишь незначительно.

Давайте вернемся к спецификации CSS 2.1, которая делает гораздо более приятную работу с объяснением линейных блоков :

Прямоугольная область, содержащая прямоугольники, образующие линию, называется линейной рамкой ... [ее высота] определяется правилами, приведенными в разделе, посвященном вычислениям высоты линии.

Из этого объяснения мы видим, что свойства line-height и vertical-align имеют какое-то отношение к тому, как рассчитываются высоты (линейных блоков, то есть элементов inline-block).Чтение вычислений высоты строки почти проясняет:

... В случае, если [линейные блоки] выровнены «сверху» или «снизу», они должны быть выровненычтобы минимизировать высоту линейного блока.

Таким образом, на высоту нашего элемента встроенного блока влияют вычисления высоты его неявного линейного блока, которые в свою очередь подлежат этим вычислениям вертикального выравнивания.

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

Запутываетесь?...Да уж.Просто вернитесь к более короткому ответу:)

Answer 3

Это потому, что DOCTYPE меняет режим рендеринга на режим соответствия стандартам. В частности, это означает, что вы сейчас используете блочную модель W3C, которая вычисляет ширину / высоту для блочных элементов иначе, чем режим причуд.

Подробнее здесь , здесь и здесь .

Answer 4

попробуйте это:

CSS:

html * { margin:0; padding:0; }

Answer 5

У меня была такая же проблема при обновлении веб-сайта XHTML4 до HTML5.У меня было много таких:

<a><img></a>

, что закончилось магическим дополнительным заполнением вокруг изображенийДля меня решение было простым - добавьте это CSS:

img { vertical-align: top; }

Answer 6

вау.@matt прав (не в этом случае), и это общее знание, но вы все не правы.

чувак, смотрите @ ваш css, у вас есть

pagetab {background-color: # ff2d00;отступы: 0px 4px;поле: 0;display: inline-block;}

pagetab ul {стиль списка: нет;поле: 0px;отступы: 0px 4px;display: block;}

для .....

, так что второе объявление для вложенного ul, которое происходит в #pagetab.у вас нет ни одного из них.

Я снял ul с объявления, чтобы они были на правильном элементе.теперь у вашего css есть 2 стиля, которые соответствуют обоим (и также вызываются в вашем универсальном селекторе (fyi, который выходит за пределы объявления вашего тела {})), так что это 3 стиля .... overkill чувак.кроме того, те, которые не совпадают, вы устанавливаете его для отображения: inline-block, а затем сбрасываете его в block ... я заблудился в этой логике.

ТАК возьмите ваш пример.замените два стиля страницы на этот

pagetab {

background-color: #ff2d00;
padding: 0px 4px;
margin: 0;

}

pagetab {

list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;

}

сохраните его,теперь удалите это, сохраните это как # 2.в FF3.6 на 7 они одинаковы.

, если бы вы использовали валидаторы, которые предназначены специально для решения / предотвращения подобных проблем, а также инструменты qa (в частности, здесь я говорю о пылиСелектор букмарклет) Вы бы решили это в не время.

Возвращаясь к веб-стандартам, gen ed css: * {} универсален, поэтому, пока другое объявление не отменяет специфику *, оно всегда будет работать.на английском, если вы объявите * {margin: 0;обивка: 0;border: none} в верхней части страницы, вам не нужно ставить поле: 0;обивка: 0;на каждом элементе.у тебя уже есть.

веб-стандарты, они спасут вашу жизнь.

Answer 7

Я никогда не использовал display: inline-block из-за проблем с IE7, поэтому я не знаком с его особенностями.Кажется, что нет необходимости применять его к ul#pagetab в вашей ситуации, поскольку он не окружен встроенными элементами.Я бы просто преобразовал его в обычный элемент блока.Более того, поскольку он содержит плавающие элементы, которые не нуждаются в плавающем элементе, кроме некоторых встроенных элементов, я бы просто присвоил ul#pagetab реальную высоту через display: block; overflow: hidden;.

Это, похоже, решит все ваши проблемы (что я могут) и предоставляет стилистически более подходящие стили.

Answer 8

Если у вас есть 2 случайные </div> метки на этой странице. В строках 32 и 34. Удалите и повторите попытку. Посмотри, исправит ли это.