Eliminar el espaciado / relleno adicional de los botones en Firefox

Vea este ejemplo de código: http://jsfiddle.net/Z2BMK/

Chrome / IE8 se ve así

ingrese la descripción de la imagen aquí

Firefox se ve así

ingrese la descripción de la imagen aquí

Mi CSS es

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

¿Cómo puedo cambiar la muestra de código para que el botón sea el mismo en ambos navegadores? No quiero usar hipervínculos basados en JavaScript porque no funcionan con la barra espaciadora en el teclado y tiene que tener una hrefURL que no es una forma limpia de manejar las cosas.

Mi solución, desde Firefox 13

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

— Bryan Field
fuente

¿Por qué agregaste margin: -1px? ¿Está conectado de alguna manera border: 2px?

— Dan

Ver mi edición. El border-widthde -moz-focus-innerera 1pxde forma predeterminada, por lo que la escritura border-widthen el código es redundante, pero deja más claro lo que está sucediendo. Es posible que también ayude en la preparación para el futuro. Para responder a su pregunta, border-widthen Firefox fue la causa de la diferencia, y agregar margin: -1pxes la solución que es más compatible que mi solución anterior.

— Bryan Field

Creo que la respuesta aceptada es visualmente equivalente, pero mejor que su solución. La respuesta aceptada elimina las cosas agregadas por FF y hace que las cosas se procesen de la misma manera en todos los navegadores. Su solución deja un borde adicional agregado por FF en su lugar y oculta un píxel de borde de dos píxeles usando margin: -1px. Esto es demasiado complicado. Se rompe si: 1) Aparece un error en el motor de renderizado (eso sucede), 2) Los bordes adquieren un color diferente, 3) Hace zoom. Para demostrar problemas potenciales con su solución, he preparado un violín: jsfiddle.net/Z2BMK / 455 . Acerca la imagen y observa que aparece un borde rojo.

— Dan

La única ventaja de su respuesta que puedo ver es preservar la funcionalidad de "contorno punteado cuando el botón está activo" de FF

— Dan

Sí, eso es exactamente lo que hace que mi solución sea mejor. Debe haber algo que le diga al usuario dónde está enfocado su teclado.

— Bryan Field

Respuestas:

164

Agrega esto:

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

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

borderEs necesario incluir la regla anterior para que los botones se vean iguales en ambos navegadores, pero también elimina el contorno punteado cuando el botón está activeen Firefox. Muchos desarrolladores se deshacen de este esquema punteado y lo reemplazan opcionalmente por algo más visualmente amigable.

— treinta y dos
fuente

Para usar un brillo de enfoque de estilo Chrome en Firefox, use button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. Esto compensa no tener la línea de puntos y le da la consistencia al navegador que buscaba.

— Bryan Field

Esto es EXACTAMENTE lo que necesitaba. ¡Gracias!

— Abel

Para solucionarlo en los elementos de entrada también agregue

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

— Stefan

¡Increíble! ¡Gracias! ¡Esto ayudó!

— SoWeLie

@Stefan jsfiddle.net/LjhQ5/1 Parece estar funcionando correctamente (excepto por el filecss). Lo siento, debe haber un CSS en conflicto en la página en la que estaba tratando de hacerlo. Gracias.

— sparebytes

Para arreglarlo en elementos de entrada y agregar

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

es simple perfecto!

— Marcelo Hexsel
fuente

¿Tiene algún conocimiento de la compatibilidad del navegador de esta solución?

— Bryan Field

¿No es input[type="file"] > input[type="button"]::-moz-focus-innerredundante porque ya lo agregaste input[type="button"]::-moz-focus-inner, o esa no es tu experiencia? ¿Tú sabes?

— Bryan Field

@GeorgeBailey: la compatibilidad del navegador es Firefox 3+, este código no afecta a ningún otro navegador.

— Dan

@GeorgeBailey Creo que esta respuesta fue una respuesta a este comentario.

— WynandB