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!
July 3rd, 2008 at 7:54 am
Bom artigo Diego, boas dicas!
September 12th, 2008 at 7:20 pm
to dando padding top de 15px
so muda no ie e no fire nada…ja testei todos os hacks e nada :/
September 12th, 2008 at 8:22 pm
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.
September 13th, 2008 at 10:22 am
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.
September 17th, 2008 at 4:00 pm
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
September 17th, 2008 at 4:01 pm
ergrhgeherh
September 17th, 2008 at 4:02 pm
ops foi mals..
div id=”teste”>
div id=”normal”>ergrhgeherh
September 25th, 2008 at 5:35 pm
“Problemas com display:table quebrando DIVS no Firefox 2;”
sugiro não usar display: table pra browser nenhum.
[]s