Como fazer com que o botão do Firefox respeite o preenchimento? - css, google-chrome, firefox, preenchimento

Por alguma razão, o Firefox button elementos não parecem respeitar o CSS padding declarações, mesmo que você as faça display: block.

Veja este JSFiddle no Chrome e no Firefox: http://jsfiddle.net/DgeQ6/

Observe como o preenchimento funciona no Chrome, mas não no Firefox. Como faço para o Firefox prestar atenção em padding dentro button elementos?

Aqui está uma imagem da aparência do Firefox na minha máquina:

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

O preenchimento deve ser de 20px, mas não é afetado.

Respostas:

4 para resposta № 1

O crédito deve ir para o Boris abaixo, mas você precisa usar o -moz-appearance: none para substituir o estilo do botão no nível do sistema operacional. Aqui está um violino: http://jsfiddle.net/DgeQ6/8/.

HTML

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

CSS

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

Também deve ser notado que o Twitter Bootstrap parece alcançar o mesmo efeito para seus botões no Firefox apenas por ter um estilo "border-radius" junto com o preenchimento.


2 para resposta № 2

Preenchimento por si só não funciona no Mac porque oA procura de botões com temas nativos do Mac anula o preenchimento. No Windows, funciona muito bem, por exemplo. Não consigo me lembrar de qual é o comportamento do Linux de improviso.

A maneira mais segura de lidar com isso é definir -moz-appearance: none se você quiser soltar o visual com tema nativo.


0 para resposta № 3

insira a descrição da imagem aqui

Parece isso no meu firefox.


Perguntas relacionadas
Cardápio