Fugindo um pouco de soluções específicas para o IE6 (já estava ficando cansativo!) vamos mostrar como fazer um hack específico para o navegador Safari e Google Chrome.
Sim, nós sabemos que usar hacks é “feio”, mas estamos aqui para apresentar soluções e, caso essa seja sua última opção, use!
Como os dois browsers utilizam a mesma engine de renderização, a Webkit, este hack acaba servindo para os dois navegadores:
body:nth-of-type(1) elemento { propriedade: valor; }
—–
* Update: Post atualizado, pois o hack antigo era interpretado pelo o IE7 também. Este novo método funciona somente para os navegadores Google Chrome e Safari.
8 comentários
Responderlinke disse:
Para quem ADORA hacks vai uma lista útil para todos os browsers: Aí vai!
/*— HACK MULTIPLO —*/
.hacks_css { border: 10px black solid; } /* esse serve pra todo mundo */
html*.hacks_css {
border: 10px green solid; /* ie7 */
]border: 10px blue solid; /* chrome */
}
* html .hacks_css { border: 10px green solid; } /* ie6 */
Iúri Florisbal disse:
esse hack afeta o firefox, ou seja, arruma um e estraga o outro.
alguém teria outra solução ?
Tiago Celestino disse:
Essa solução funciona
@media screen and (-webkit-min-device-pixel-ratio:0){
p {color: #00ff00;}
}
Brunno dos Santos disse:
Cara… nem a solução do post (que afeta o Firefox) e nem a solução do Tiago (que simplesmente não funciona) deram certo!
Ainda estou buscando um hack para o webkit…
Brunno dos Santos disse:
@Brunno dos Santos: Opa foi mal!! A solução do Tiago funciona sim!!
Agni disse:
Realmente esse Hack afetou mesmo o firefox tbm… e não entendi bem como aplicar esse hack do @Tiago Celestino em um elemento específico… algum exemplo mais claro?
Abçs
Carol disse:
Pessoal segue um que funciona e ta bem explicadinho!
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
Carol disse:
fonte : http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
ops!