CSS Hacks para o Firefox 3
Por: Diego Franco - [ July 2nd, 2008 ]
Primeiramente parabéns ao Firefox, mais de 8 milhões de downloads em 24 horas, garantindo o seu lugar no Guinness Book.
Bom, chega de elogios e vamos ao trabalho.
Firefox 3, IE8, este último polêmico por sinal, resumindo, diferente do que a galera do Casseta & Planeta diz: nossos problemas não acabaram! Muito pelo contrário talvez até aumentem só o tempo dirá.
Nas primeiras impressões alguns problemas foram realmente melhorados, principalmente em relação a performance, porém já percebemos comportamentos estranhos em alguns atributos CSS, como por ex.:
Problemas com display:table quebrando DIVS no Firefox 2;
Facilmente corrigido com a substituição por overflow:auto;
Porém nos deparamos com comportamentos estranhos com overflow:auto; no Firefox 3;
Para corrigir use:
Use: overflow:visible;
A medida que encontrar mais problemas com CSS e suas devidas soluções no Firefox 3 vou escrever aqui.
E vamos para a declaração dos HACKS para o Firefox 3, título deste post. Lembrando que você poderá usar Conditional comments, depois falamos sobre este.
A resolução é simples escreva sempre o nome da classe do seu elemento seguido de uma vírgula seguido de x:default { atributos } conforme exemplo abaixo:
Hack for Firefox 3
.nomedasuadiv, x:default { atributos }
Vamos lembrar outros Hacks.
Hack for Firefox 2
.nomedasuadiv, x:-moz-any-link { atributos }
Hack for Internet Explorer 7
.nomedoseuelemento { *display:none; }
Hack for Internet Explorer 6
.nomedoseuelemento { _display:none; }
Hack for Opera
@media all and (min-width: 0px){
.content { }
}
Qualquer problema comentem!
Bons testes!
Procure por: MP3, iPod, celulares, notebooks, câmeras
O Modelando é o site pessoal do Diego Franco Miguel que, atualmente, trabalha como Designer e lidera uma equipe de Agência Web na 
Assine o Feed do Modelando
1° Vinicius July 3rd, 2008
Bom artigo Diego, boas dicas!
2° kaue September 12th, 2008
to dando padding top de 15px
so muda no ie e no fire nada…ja testei todos os hacks e nada :/
Resposta do Autor 3° Diego Franco September 12th, 2008
Kaue certifique de que você esteja usando o hack correto para o browser correto. Não sei qual é o seu browser, mas abaixo vai um exemplo se for para o Firefox 3.
.nomedoseuelemento, x:default {padding-top:15px;}
Lembrando que você só verá o resultado do código acima somente no Firefox 3, caso ainda assim tenha problemas tente colocar um !important após o valor do atributo por ex.:
.nomedoseuelemento, x:default {padding-top:15px !important;}
Espero ter ajudado.
4° Gil September 13th, 2008
Instalei o novo firefox e agora tenho um problema.
Usei codigo css absoluto para posicionar um video do youtube num profile do myspace.
Até ai tudo bem, fiz o comentário condicional pra aparecer tanto nos padroes no firefox quanto no IE.
Só que com o novo firefox,ao inves dele ignorar o conditional comment ,ele considera também o código do ie (coisa que ele não fazia nas versões anteriores) resultando em dois videos (um em cada posição) no firefox.
5° kaue September 17th, 2008
Sou eu denovo…estou usando o novo firefox
meu caso é o seguinte:
#teste {
background-color: #00FF66;
height: 500px;
width: 500px;
}
#normal, x:default {
background-color: #00CCCC;
height: 300px;
width: 200px;
margin-top: 15px !important;
}
certo?
ergrhgeherh
eu falei no post anterior que nao dava padding..me enganei..é margin que nao da
6° kaue September 17th, 2008
ergrhgeherh
7° kaue September 17th, 2008
ops foi mals..
div id=”teste”>
div id=”normal”>ergrhgeherh
8° Danilo September 25th, 2008
“Problemas com display:table quebrando DIVS no Firefox 2;”
sugiro não usar display: table pra browser nenhum.
[]s
9° Lucio July 21st, 2009
Mudei a cor da borda do meu radio e checkbox. No IE mostra tudo legal! mas no firefox nao aparece as cores. Como posso usar os hacks nesse caso?
10° jeziel July 24th, 2009
Meu problema é um pouco incomum.
Imagine que vc tem uma DIV com background-color:#395d18;(verde).
E presisa colocar uma borda tracejada da mesma cor.
#bloco_verde{ position:absolute;
background-color:#395d18;
border-width:1px;
border-color:#395d18;
border-style:dashed;}
O problema é que no IE8 e deais versoes, a borda fica do lado de fora da DIV (oq esta correto, afinal é uma BORDA).
MAS NO FF3 a borda fica do lado de DENTRO da DIV, e como a borda é da mesma cor que a DIV ela acaba sumindo
Tentei colocar o hack ensinado mas nao funciona.
Faça o teste vc mesmo.
#bloco_verde, x:default {
background-color:#395d18;
border-width:1px;
border-color:#ffffff
border-style:dashed!important;}
Observem que no FF,mudei a cor da borda para #ffffff (cor do fundo da pagina)
Explico pq fiz isso, ja que a borda no FF3 é interna(do lado de dentro da div) tive que colocar ela em branco, assim ela aparece.
Se esse hack funcionasse seria perfeito. borda branca do FF usando o hack.
E borda verde no IE, mas nao funcionaaaa
Helppppp pleaseeeeeee galera.
11° Hector November 3rd, 2009
A questão é clara:
O FireFox 3 parace que piorou, e está conseguindo superar o IE em termos de incompatibilidade.
Só existe um navegador 100% compatível com os WebStandards, Opera 10.
Quanto ao IE e ao FF, hacks, hacks e mais hacks.