Убрать лишний интервал между кнопками / отступы в 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, потому что они не работают с пробелом на клавиатуре, и у него должен быть hrefURL-адрес, который не является чистым способом обработки вещей.

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

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

— Брайан Филд
источник

Зачем добавили margin: -1px? Это как-то связано border: 2px?

— Дэн

Смотрите мою правку. border-widthИз -moz-focus-innerбыл 1pxпо умолчанию, так что письменность border-widthв код избыточен, но это делает его более ясно , что происходит. Возможно, это поможет и в будущем. Чтобы ответить на ваш вопрос, border-widthпричиной разницы был Firefox, а добавление margin: -1px- это решение, которое более совместимо, чем мое предыдущее решение.

— Брайан Филд,

Я думаю, что принятый ответ визуально эквивалентен, но лучше вашего решения. Принятый ответ удаляет материал, добавленный FF, и заставляет вещи отображаться одинаково во всех браузерах. Ваше решение оставляет на своем месте дополнительную границу, добавленную FF, и скрывает один пиксель двухпиксельной границы с помощью margin: -1px. Это слишком сложно. Он ломается, если: 1) появляется ошибка в механизме рендеринга (что происходит), 2) границы становятся другого цвета, 3) вы увеличиваете масштаб. Чтобы продемонстрировать потенциальные проблемы с вашим решением, я подготовил скрипку: jsfiddle.net/Z2BMK / 455 . Увеличьте масштаб и обратите внимание на появившуюся красную рамку.

— Дэн

Единственное преимущество вашего ответа, которое я вижу, - это сохранение функциональности FF «пунктирный контур при активной кнопке»

— Дэн

Да, именно это делает мое решение лучше. Должно быть что-то, что сообщает пользователю, где сфокусирована его клавиатура.

— Брайан Филд

Ответы:

164

Добавь это:

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

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

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

— тридцать точек
источник

Чтобы использовать свечение фокуса в стиле Chrome в Firefox, используйте button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. Это компенсирует отсутствие пунктирной линии и обеспечивает согласованность в браузере, которую я искал.

— Брайан Филд

Это ДЕЙСТВИТЕЛЬНО то, что мне нужно. Благодаря!

— Abel

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

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

— Стефан

Потрясающе! Спасибо! Это помогло!

— SoWeLie 05

@Stefan jsfiddle.net/LjhQ5/1 Кажется, он работает правильно (кроме filecss). Извините, на странице, на которой я пытался это сделать, должен быть конфликт css. Благодарю.

— Sparebytes

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

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

просто отлично!

— Марсело Хексель
источник

Есть ли у вас какие-либо сведения о совместимости этого решения с браузерами?

— Брайан Филд

Разве это не input[type="file"] > input[type="button"]::-moz-focus-innerлишний раз, поскольку вы уже добавили input[type="button"]::-moz-focus-inner, или это не ваш опыт? Ты знаешь?

— Брайан Филд

@GeorgeBailey: браузер совместим с Firefox 3+, этот код не влияет на другие браузеры.

— Дэн

@GeorgeBailey Я думаю, что этот ответ был задуман как ответ на этот комментарий.

— WynandB