Удалите лишние кнопки / отступы в Firefox - PullRequest
Новая
       58

Удалите лишние кнопки / отступы в Firefox

81 голосов
/ 01 апреля 2011

См. Этот пример кода: 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; }

Ответы [ 2 ]

164 голосов
/ 01 апреля 2011

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

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

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

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

8 голосов
/ 16 ноября 2012

Чтобы исправить это и на элементах ввода, добавьте 

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

просто идеально!

...