Ответ 1

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

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

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

Более длинный ответ выглядит следующим образом:

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

9,5. "Встроенные или плавающие, незаменяемые элементы

... Используемое значение height - это вычисленное значение, если это не" auto ", когда используемое значение определяется" Auto "высоты для корней потока".

Проверьте, каковы автовысоты для корней потока:

9,10. 'Автовысоты для корней потока

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

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

...

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

попробуйте следующее:

CSS

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

Ответ 5

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

<a><img></a>

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

img { vertical-align: top; }

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Чувак смотреть @ваш css, вы

pagetab {background-color: # ff2d00; padding: 0px 4px; margin: 0; display: inline-block;}

pagetab ul {list-style: none; margin: 0px; padding: 0px 4px; display: block;}

для.....

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

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

SO возьмите ваш пример. измените два стиля pagetab на этот

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} в верхней части страницы, вам не нужно указывать margin: 0; обивка: 0; на каждый отдельный элемент. у тебя уже есть.

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