CSS: размер кнопок в Chrome отличается от Firefox

Question

У меня есть следующий HTML-код:

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

В Firefox кнопка ввода имеет больше отступов, чем в Chrome.

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

ОБНОВЛЕНИЕ: Если вам интересно, почему у меня отрицательное поле - потому что между полем ввода и кнопкой ввода - слишком много места.

Answer 1

/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

Вы получите одинаковый внешний вид кнопок в Chrome и Firefox.

Answer 2

Даже если вы как разработчик тестируете в разных браузерах и видите разницу в кнопках, пользователь этого не сделает. Слишком легко сфокусироваться на вещах, которые пользователи не заметят: у пользователя, скорее всего, есть либо Firefox, либо IE, либо Chrome, но не все. Редко пользователи когда-либо переключают браузеры с течением времени, не говоря уже о переключении между ними и жалуются на разницу в несколько пикселей.

Так что, если вы рассматриваете кнопки и опыт только в одном браузере за раз, и если он работает хорошо в этом опыте / браузере, не тратьте больше времени. Вместо этого переходите к следующим шагам.

Это не отвечает «почему», но кто-то еще объяснил это.

Answer 3

элементы формы отображаются по-разному (по умолчанию) в зависимости от ОС и / или браузера. если вы хотите, чтобы ваши элементы формы (поля ввода, кнопки отправки и т. д.) выглядели одинаково во всех случаях, вам нужно явно стилизовать их, используя границы, отступы и поля.

Answer 4

Попробуйте это

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

Answer 5

Попробуйте использовать -webkit-box-sizing:content-box, затем прочитайте о коробочных моделях.

Answer 6

Здесь никто не упоминает, что Chrome сбрасывает CSS для этих элементов:

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

Так что, независимо от того, что вы установили для отступа, насколько я могу судить, он будет переопределен Chrome. Я пытался использовать !important так же, как и другие методы, но все еще не повезло. Если у кого-то есть понимание этого, я хотел бы знать.

Answer 7

Чтобы получить одинаковый размер в обоих браузерах, вы должны установить одинаковые начальные значения для всех элементов CSS, например, сброс.

Вот как я исправил проблему: поместите это в начало вашего CSS-файла

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
    {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border-top-width: 0px;
      border-right-width-value: 0px;
      border-bottom-width: 0px;
      border-left-width-value: 0px;
    }

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

Answer 8

Я пытался изменить высоту и отступ одновременно.

Результат неплохой. Кажется, это правильно для обоих браузеров (FF и Chrome в Linux) ... например, я поставил:

.classname {
height:20px;
    padding:4px;
}

Может быть, это просто мой счастливый день ... однако вы можете попробовать это.