Hack css para Firefox de um jeito fácil

Veja como efetuar um hack css para Firefox de forma bem simples e fácil de implementar e resolva aquele bug chato no layout do seu site.

[ad#texto]

Há alguns anos atrás o grande problema dos desenvolvedores front-end para Web era o Internet Explorer, geralmente tanto o Firefox quanto o Chrome renderizavam igualmente nossas interfaces, porém este tempo mudou, o Internet Explorer evoluiu e tem causado bem menos problemas, contudo o Firefox na sua última versão começou a apresentar certa rebeldia, agora teremos que utilizar hacks css para Firefox.

É difícil encontrar algum desenvolvedor de interfaces Web que não tenha lançado mão dos hacks css para compatibilizar seu trabalho também com o Internet Explorer, então vamos agora adotar a mesma técnica para compatibilizar layouts com o rebelde Firefox.

Vamos supor que temos o arquivo style.css em nosso projeto e que por alguma magia do a seguinte regra esteja sendo renderizada erroneamente no Firefox:

.divPosit{
 padding-left: 15px;
 border: 2px;
}

Utilizando um hack css para Firefox devemos manter a regra acima utilizável para o Internet Explorer e para o Chrome, porém devemos adotar uma nova regra para o Firefox, então fazemos da seguinte forma:

@-moz-document url-prefix() {
 .divPosit{
  padding-left: 10px;
  border: 2px;
 }
}

Assim, este novo trecho, que possui o mesmo identificador da regra comum irá ser reconhecida somente no Firefox, o que facilita muito a remoção de pequenos bugs no nosso layout e o mais legal é que para este hack css para Firefox ser implementado basta uma simples alteração no nosso arquivo style.css, sem a necessidade de nenhuma alteração no HTML.