Разница в ширине кнопок между Firefox и Chrome - PullRequest
Новая
       41

Разница в ширине кнопок между Firefox и Chrome

5 голосов
/ 21 февраля 2012

Я знаю, что есть много вопросов по FF / Chrome CSS, но я не могу найти именно этот.

Вот сценарий JS Fiddle, показывающий проблему: http://jsfiddle.net/ajkochanowicz/G5rdD/1/

(Извините за длинный CSS, это было скопировано с сайта.)

По сути, Firefox и Chrome дают мне два разных значения для самой внутренней ширины кнопки, 4 и 6. Я хотел быэто должно быть 4 или меньше для обоих.Что вызывает это?

From Chrome

From Firefox

Ответы [ 2 ]

5 голосов
/ 10 сентября 2014

Попробуйте добавить CSS ниже. Firefox добавляет дополнительный отступ на кнопку. 

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

Похожие: Удалить лишние интервалы / отступы в Firefox

Источник: http://wtfhtmlcss.com/#buttons-firefox-outline

2 голосов
/ 21 февраля 2012

Вы не указали width, кроме auto.

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

Как насчет изменения width на 4px и :hover на что хотите?

...