Проблема, с которой я сталкиваюсь на своих веб-страницах, заключается в том, что в Firefox (и только в Firefox) параметры внутри тегов <select> не затрагиваются font-family: inherit. <option> должны наследовать семейство шрифтов, указанное <body>, от семейства шрифтов, указанного их родителем.
Вместо этого они используют шрифты, указанные в профиле пользователя Firefox. Таким образом, если в настройках Firefox для пользователя установлен тип шрифта по умолчанию «Serif», выпадающие списки выглядят отвратительно. Элемент select сам по себе правильно наследует шрифт страницы, а параметры в раскрывающемся списке — нет, как вы можете видеть здесь:
У них должен быть тот же шрифт, что и у первого варианта выбора.
Есть ли способ их сделать? Я попытался указать правило CSS, чтобы принудительно наследовать шрифт, но оно ничего не делает:
option {
font-family: inherit;
}
Принудительный шрифт работает, но это не обязательно то, что мне нужно.
Есть ли способ сделать это без редактирования DOM или без использования JS, или это просто невозможно с Firefox?
1 ответ
Это помогло мне.
select, option {
font: -moz-pull-down-menu;
}
-moz-appearance(илиappearanceдля более новых версий) должно работать без принуждения.font-family: sans-serif;font-family: sans-serif. Используя JS, я смог обнаружить, что вычисленный шрифт параметров действительно был шрифтом моей страницы, так что это буквально ошибка на стороне Firefox, которая не учитывает шрифт. Когда я вручную редактирую семейство шрифтов, чтобы оно было чем-то конкретным, например Comic Sans, это работает, поэтому, возможно, единственным способом является использование JS для установки шрифта раскрывающегося списка после завершения загрузки страницы. я лично не пробовал.