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

Chrome/IE8 este aspecto

Eliminar el exceso de botón espaciado/relleno en Firefox

Firefox se ve como esta

Eliminar el exceso de botón espaciado/relleno en Firefox

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 ejemplo para hacer que el botón de la misma en los dos navegadores? No quiero usar JavaScript basado en los hipervínculos, porque no trabajan con la barra espaciadora del teclado y tiene que tener un href URL que no es una manera correcta de manejar las cosas.

Mi solución, ya que Firefox 13

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

  • ¿Por qué añadir margin: -1px? Es de alguna manera conectado a border: 2px?
  • Véase mi edición. El border-width de la -moz-focus-inner fue 1px por defecto, por lo que la escritura border-width en el código es redundante, pero lo hace más claro lo que está pasando. Es posible que puede ayudar en el futuro también. Para responder a su pregunta, la border-width en Firefox fue la causa de la diferencia, y la adición de margin: -1px es la solución que es más compatible que mi solución anterior.
  • Creo que el aceptado respuesta es visualmente equivalente, pero mejor que tu solución. Aceptado respuesta quita cosas agregado por FF, y hace las cosas de procesamiento de la misma manera en todos los navegadores. Su solución deja un extra de frontera añadido por FF en su lugar, y se esconde uno de los pixeles de dos píxeles frontera mediante margin: -1px. Esto es demasiado complicado. Se rompe si: 1)Un error en el motor de representación aparece(que sucede), 2)las Fronteras obtener diferentes colores, 3)aplicar el zoom. Para demostrar los posibles problemas con la solución, he preparado un violín: jsfiddle.net/Z2BMK/455. Por favor, hacer zoom y observar un borde rojo que aparecen.
  • La única ventaja de que la respuesta que puedo ver es la preservación de FF «el esquema de puntos cuando el botón está activo» funcionalidad
  • Sí, Eso es exactamente lo que hace que mi solución mejor. Debe haber algo que le dice al usuario si su teclado está enfocado.
  • Tenga en cuenta, su violín no es el mismo que el de mi solución. Aquí está un violín que demuestra mi solución mejor. El zoom problema no se aplica. Admito que mi solución no puede ser a prueba de futuro, pero estoy dispuesto a apostar que va a ser.
  • Todavía un problema en el 2014 – y sigue siendo muy útil, gracias! Puedo añadir que puede ser encessary también reducir el line-height de el botón, si no contiene nada, pero una imagen.

InformationsquelleAutor Bryan Field | 2011-04-01

2 Comentarios

  1. 164

    Añadir esto:

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

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

    Incluyendo la border la regla anterior es necesario para los botones para buscar la misma en ambos navegadores, sino que también elimina el contorno de puntos cuando el botón es active en Firefox. Muchos de los desarrolladores de deshacerse de este esquema de puntos, opcionalmente reemplazarlo con algo más visualmente agradable.

    • +1 por el comentario sobre el enfoque de esquema
    • El uso de Cromo estilo foco resplandor en Firefox, uso button{background:/*Something here*/} button:focus{ -moz-box-shadow:0 0px 3px #C80;}. De esta forma se compensa el no tener la línea de puntos y le da la consistencia del navegador que yo buscaba.
    • Este es EACTLY lo que yo necesitaba. Gracias!
    • Para solucionarlo en los elementos de entrada, así 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
    • Impresionante! Gracias! Esto ayudó!
    • He intentado en los selectores, pero no parecen estar funcionando.
    • Crear un ejemplo en JSFiddle y me puede echar un vistazo a él. Funciona muy bien para nosotros.
    • href=»http://jsfiddle.net/LjhQ5/1/» >jsfiddle.net/LjhQ5/1 parece estar funcionando correctamente (excepto para el file css). Lo siento, no debe haber sido conflictiva de la css en la página que yo estaba tratando de hacerlo. Gracias.
    • href=»http://jsfiddle.net/LjhQ5/2/» >jsfiddle.net/LjhQ5/2 se puso a trabajar y trató de averiguar cuál es el problema. Esto debería funcionar en FF pero no lo es. Yo creo que los estilos se aplican, es solo que no estoy seguro de por qué el button elemento es menor que el resto.
    • Si cambia el valor de relleno que como 100px usted puede ver el valor tiene un efecto en FF (para mí no). También se le olvidó un punto y coma después de la declaración de fronteras (no sé cuál es el efecto que tiene)
    • Tiene algo que ver con el line-height:1em; regla. Sin él, los botones son del mismo tamaño. jsfiddle.net/LjhQ5/6
    • He encontrado la respuesta a mi problema: cssnewbie.com/input-button-line-height-bug – Usted no puede cambiar la línea-altura en las entradas en FireFox… simplemente se ignora. ASÍ que la Pregunta
    • el uso de Cromo estilo foco resplandor en Firefox, que no funciona en Firefox 13
    • Wow, me pregunto cómo ustedes encontrar este tipo de cosas. Buen truco, gracias por compartir!

  2. 8

    Solucionarlo en los elementos de entrada así como añadir

    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!

    • ¿Tiene usted algún conocimiento de la compatibilidad con el explorador de esta solución?
    • No input[type="file"] > input[type="button"]::-moz-focus-inner redundante, puesto que ya ha agregado input[type="button"]::-moz-focus-inner, o es que no es tu experiencia? ¿Sabe usted?
    • compatibilidad del navegador es Firefox 3+, este código no afecta a ningún otro navegador.
    • Creo que esta respuesta fue concebido como una respuesta a la this comentario.

Dejar respuesta

Please enter your comment!
Please enter your name here