Удалите дополнительный интервал/дополнение кнопок в Firefox.

Смотрите этот пример кода: http://jsfiddle.net/Z2BMK/

Chrome/IE8 выглядят следующим образом

enter image description here

Firefox выглядит следующим образом

enter image description here

Мой CSS

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

Как я могу изменить образец кода, чтобы сделать кнопку одинаковой в обоих браузерах? Я не хочу использовать гиперссылки на основе JavaScript, потому что они не работают с пробелом на клавиатуре, и у него должен быть URL href, который не является чистым способом обработки вещей.

Мое решение, поскольку Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

Ответы

Ответ 1

Добавьте это:

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

Включение вышеприведенного правила border необходимо для того, чтобы кнопки выглядели одинаково в обоих браузерах, но также удаляет пунктирный контур, когда кнопка active в Firefox. Многие разработчики избавляются от этого пунктирного плана, необязательно заменяя его чем-то более визуальным.

Ответ 2

Чтобы зафиксировать его на элементах ввода, добавьте

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

является простым совершенным!