pagina - menu active css

Eliminar el espaciado/relleno de los botones adicionales en Firefox

Question

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

Chrome / IE8 se parece a esto

Firefox se ve así

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 el código de muestra para hacer 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 URL href que no es una manera limpia de manejar las cosas.

Mi solución, desde Firefox 13

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

Answer 1

Agrega esto:

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

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

La inclusión de la regla de border anterior es necesaria para que los botones se vean iguales en ambos navegadores, pero también elimina el contorno punteado cuando el botón está active en Firefox. Muchos desarrolladores se deshacen de este esquema punteado, reemplazándolo opcionalmente por algo más amigable para la vista.

Answer 2

Para arreglarlo en los elementos de entrada, así como 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!