Почему тег ‹button› обрабатывает их иначе, чем ‹div›?

Я заметил, что теги ‹button›, похоже, масштабируют единицы em от чего-то другого, кроме font-size. Теги ‹div› не демонстрируют такого поведения. Это происходит в последних версиях Chrome, Firefox и т. Д.

Оба они имеют такой стиль:

button, div {
    width: 3rem;
    height: 3em;
}

См. Пример этой скрипки.

Если я задаю размер div и кнопки шириной 3rem и высотой 3em, я ожидаю, что они будут квадратными, если только на один из них или на предка не влияет стиль размера шрифта. Единственный размер шрифта указан в теге ‹body›, но происходит то, что div имеет квадратную форму, но кнопка имеет меньшую высоту, чем ее ширина.

Если я проверяю кнопку в хроме, там говорится, что она наследует размер шрифта 1em от тега ‹body›, и все же проблема устраняется, когда я явно устанавливаю размер шрифта 1em (см. Скрипт).

Может ли кто-нибудь объяснить мне, что здесь происходит? Такое чувство, что я упускаю что-то очевидное.


css font-size em
person FTWinston    schedule 02.07.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, ваша кнопка HTML не унаследовала размер шрифта от <body>. Я считаю, что многие элементы формы ведут себя так (по крайней мере, в некоторых браузерах), хотя у меня нет документации.

Я добился успеха, добавив:

button {
    font-size:inherit;
}

РАБОЧИЙ ПРИМЕР

person showdev    schedule 02.07.2014
comment
Отлично, спасибо. Поскольку инспектор Chrome указал, что он унаследовал этот размер шрифта, это меня бросило. - person FTWinston; 02.07.2014
comment
Да, это круто. отчет об ошибке был помечен как недействительный, поскольку он (очевидно) соответствует спецификации . Но я не могу найти ссылку на официальную документацию. Может еще кто может? ... - person showdev; 02.07.2014

arrow_upward
1
arrow_downward

Здесь происходит то, что браузеры применяют таблицу стилей браузера по умолчанию, которая приводит к использованию уменьшенного размера шрифта для button элементов. Это не описано в спецификациях, и размер скидки может варьироваться в зависимости от браузера. Вы можете увидеть, что то же самое происходит с input элементами, такими как <input type="text"> по умолчанию: размер шрифта меньше, чем в окружающем тексте (хотя может быть трудно увидеть, используются ли разные шрифты, что является обычным по умолчанию).

Инструменты разработчика в браузерах несовершенны. Например, Chrome действительно показывает font-size элемента button как унаследованный, но также показывает меньший вычисленный размер. Объяснение заключается в том, что в таблице стилей браузера по умолчанию есть font: -webkit-small-control вместо button, и это параметр, который здесь действительно важен. Информация о наследовании просто неверна.

Когда вы устанавливаете font-size: 1em (или, что то же самое, font-size: 100%) в элементе button, вы отменяете настройку по умолчанию. Это несколько лучше, чем установка font-size: inherit, которая имеет немного менее широкую поддержку браузерами.

person Community    schedule 02.07.2014