Los botones de Firefox tienen relleno, los botones de Chrome no

¿Cómo obtengo mi <button> s para que sea consistente en Firefox y Chrome? ¿Hay una solución CSS no condicional ? En este momento, botones de Firefox tienen acolchado extra, aunque YUI's CSS Reset hizo el relleno 0.Los botones de Firefox tienen relleno, los botones de Chrome no

HTML button

he descubierto que para obtener la misma apariencia, Chrome tiene que tener el doble de relleno.

  #fileActions button { 
       padding: 0.2em; 
      } 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
      #fileActions button { 
       padding: 0.4em; 
      } 
}

Chrome

Chrome computed style

Firefox

firefox computed style

Fuente

2011-02-25 JoJo

También nunca he podido eliminar todo el relleno de los botones de Firefox. Solo un ejemplo de lo que he corrido es aquí: http://jsfiddle.net/Z2BMK/. IE8, Chrome funciona correctamente. Firefox agrega relleno misterioso. Usaría una etiqueta en lugar de botones, pero no me gusta la forma en que se pueden arrastrar las etiquetas, y las etiquetas no se disparan automáticamente en la barra espaciadora cuando se enfocan. –

Intento mantenerme alejado de '' para cosas que desencadenan javascript. ** (1) ** No es semánticamente correcto. '' se supone que debe ir a una nueva URL. ** (2) ** Hay un código adicional para un '' para simular un '

posible duplicado de [Eliminar espaciado/relleno de botón adicional en Firefox] (http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox) – Dan

Firefox le da a los botones algo llamado enfoque interno, esto le permite dibujar la línea de puntos de enfoque. Hay una regla en forms.css para él, que le da 1px de borde y 2px de relleno izquierdo y derecho. No sé si es posible anular esto desde una página web.

Fuente

2011-02-27 22:57:40 Neil

Lo es. El único inconveniente es que no obtendrá una línea punteada cuando se enfoca. http: // stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox/5518143 # 5518143 –

@George Bailey Gracias por el enlace. – Neil

Está difícil de decir sin ver el CSS, pero si marca el css de la YUI restablecer, verá que no establece ni restablece ninguna propiedad para el elemento button excepto las heredadas y eso no incluye el relleno, hasta donde yo sé.

Fuente

2011-02-25 20:50:48 jeroen

Mi CSS está * en cascada * en varios * hojas * y varias ubicaciones, por lo que pensé que sería más fácil proporcionar los estilos calculados. ¿No es esto todo lo que importa? Los dos estilos calculados en FF y C muestran que el relleno es 0. – JoJo

@JoJo Nunca he tenido este problema antes, ¿tiene un ejemplo en vivo? – jeroen

Es un poco difícil de mostrar porque nuestro sitio web requiere un complemento de reproductor de video para funcionar, pero tengo una solución alternativa. Vaya a http://www.veetle.com. Luego abra su consola (Firebug) para agregar un nuevo botón al final de la página: '$$ ('body'). First(). AppendChild ((new Element ('button')) update ('button ')); '. Verás que el botón tiene relleno extra en FF. – JoJo

Los botones de Firefox tienen relleno, los botones de Chrome no

Respuesta

Cuestiones relacionadas