Удаление дополнительного интервала между кнопками / заполнения в Firefox

Question

Удаление дополнительного интервала между кнопками / заполнения в Firefox

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

Chrome/IE8 выглядят так

Firefox выглядит так

мой CSS-это

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

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

мое решение, начиная с Firefox 13

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

2 81

css back-button firefox spacing

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
это просто прекрасно!

7

thirtydot · Accepted Answer · 2014-02-17 13:07:05

добавить это:
button::-moz-focus-inner {
    padding: 0;
    border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/

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