Размер кнопки CSS в Chrome отличается от размера в браузере Safari (хотя оба браузера webkit?)

Question

У меня есть базовый css, который среди других элементов устанавливает мои входные данные для:

  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;

И у меня это тоже есть для конкретной кнопки

header input[type=submit] { background:#383838; color:#FFF; padding:4px 5px; }

Все в порядке, кроме кнопки ввода в Chrome, которая на 2 пикселя короче по высоте и ширине, чем любой другой браузер (так как для каждой стороны есть разность в 1 пиксель). То, что делает это более расстраивающим, - то, что это не затрагивает сафари, который также является браузером webkit.

Есть идеи, почему?

Cheers, Ади.

Answer 1

button s и input s отображаются (немного) по-разному в каждом браузере (отступы, поля и т. Д.). Если вы хотите получить одинаковый результат для каждого браузера, вам нужно настроить таргетинг на каждый из них с разными правила стиля.

Answer 2

Вы должны попробовать сброс CSS в первой части документа таблицы стилей. некоторые браузеры используют стиль по умолчанию .. так что это также может быть проблемой