Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 12 abril 2011

Veja como resolver o bug no Firefox durante a estilização de um botão flexível (quando se usa um elemento dentro do button).

Layout do botão:

Botão

HTML:

<button class="botao" type="submit"><strong>Logar</strong></button>

CSS:

.botao,
.botao strong { display: inline-block; height: 27px; border: 0; background: url(../imagens/botao-marrom.png) no-repeat; line-height: 27px; text-shadow: rgba(72,25,24,.41) 1px 1px 0; color: #fff; }
.botao { padding-left: 12px; }
.botao strong { padding-right: 12px; background-position: right -27px; }

Nesse caso, a imagem de fundo do botão é o png “botao-marrom.png”:

Veja como o Firefox renderiza:

Botão quebrado

Para ajustar o bug, inclua o seguinte código no css:

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

Fonte da solução: a head creative

1 comentário

Responder
  1. 24 de maio de 2011

    Lincoln disse:

    Muito obrigado pela solução!

Escreva seu comentário