Ошибка? Chrome на Mac игнорирует размер шрифта кнопки отправки

Question

Иногда вы думаете, что сходите с ума.Это один из тех случаев.
Во время работы у меня была проблема, из-за которой я не мог изменить размер шрифта кнопки отправки.Затем, сойдя с ума, я свел его к следующему простому примеру:

https://jsfiddle.net/zf9sq2gx/

font-size: 100px;

Я уверен, что на вашей машине это выглядит отлично, но на моей - нет.
См .:

Я работаю на Mac здесь, и этот результат от Chrome.- Firefox работает должным образом - другие страницы, которые я создал или посещаю онлайн, работают, однако этот базовый пример и страница, над которой я сейчас работаю, демонстрируют такое поведение.

Неважно, какое число или единица измеренияразмер шрифта.Другие значения, такие как padding, также игнорируются.Однако WIDTH НЕ игнорируется.
При изменении размера шрифта в инструментах разработчика Chrome кнопка мигает с текущего размера шрифта на меньший, но мгновенно возвращается назад.Даже в этом случае он должен, по крайней мере, мигать большим.Что, если мы вообще изменим его на другой тег?Теперь это работает.
Что если мы просто изменим тип с отправки на текст?Это ведет себя как ожидалось снова.Что если мы удалим даже другие теги, такие как тело, форма и все остальное?Не имеет значения.

Обновление мема.Без изменений.

Как это могло быть? Не говоря уже о том, что другие страницы могут работать с кнопками отправки.Но я сделал этот пример в jsfiddle как можно более простым, чтобы вернуться к минимальному уровню, даже используя встроенный CSS (потому что! Important ничего не сделал).

Answer 1

В дополнение к решению Петрука Дмитрия, вы можете решить эту проблему, установив -webkit-appearance: none или переписав один из стилей вендора, если вы не хотите добавлять специфичные для браузера CSS.Очевидно, что перезапись любого из стилей вендора (список протестированных стилей см. Ниже) полностью удалит стилизацию кнопки.У меня никогда не было этой проблемы раньше, так как я обычно меняю фон и границу при стилизации кнопки.

Примеры:

<input type="submit" style="font-size: 60px;"><br />
<input type="submit" style="font-size: 60px; -webkit-appearance: none;" value="Webkit appearance"><br />
<input type="submit" style="font-size: 60px; background: blue;" value="background"><br />
<input type="submit" style="font-size: 60px; border: 1px solid green;" value="border">

РЕДАКТИРОВАТЬ: (некоторые) Более подробную информацию об этом поведении можно найти здесь , хотя кажется, что эта "особенность" не очень хорошодокументированы.Тем не менее, для получения дополнительной информации по этому вопросу вы можете проверить эту страницу .

Answer 2

Попробуйте использовать

-webkit-appearance: none;

Это отменит стили хрома по умолчанию для кнопки.