¿Cómo hacer para que el botón de Firefox respete el relleno? - css, google-chrome, firefox, relleno

Por alguna razón, Firefox button los elementos no parecen respetar el CSS padding declaraciones, incluso si las haces display: block.

Ver este JSFiddle en Chrome y Firefox: http://jsfiddle.net/DgeQ6/

Observe cómo funciona el relleno en Chrome, pero no en Firefox. ¿Cómo hago para que Firefox preste atención a padding en button ¿elementos?

Aquí hay una captura de pantalla de cómo se ve en Firefox en mi máquina:

https://www.evernote.com/shard/s217/sh/dc349236-9a7e-46f2-ae77-3a7581fa78c1/ea90d1f4a880ba64257fdd744b9fabcf

El relleno debe ser de 20px pero no se ve afectado.

Respuestas

4 para la respuesta № 1

El crédito debe ir a Boris a continuación, pero debe usar -moz-appearance: none para anular los estilos del botón de nivel del sistema operativo. Aquí hay un violín: http://jsfiddle.net/DgeQ6/8/.

HTML

<button class="btn-large">Hello</button>

CSS

.btn-large {
padding: 100px;
-moz-appearance: none;
}

También se debe tener en cuenta que Twitter Bootstrap parece lograr el mismo efecto para sus botones en Firefox simplemente por tener un estilo "border-radius" junto con el relleno.


2 para la respuesta № 2

El relleno por sí solo no funciona en Mac porque elLa apariencia de botones con apariencia de Mac nativa anula el relleno. En Windows funciona muy bien, por ejemplo. No puedo recordar cuál es el comportamiento en Linux de forma directa.

La forma más segura de lidiar con esto es establecer -moz-appearance: none si quieres soltar el aspecto de temática nativa.


0 para la respuesta № 3

enter image description here

Se ve así en mi Firefox.


preguntas relacionadas
Menú