Muita coisa sobre CSS, HTML, Javascript, Search engine optimization (seo), padrões e web
11 Jul
Não tem como, será sempre - um pouco de exagero - preciso utilizar do hack no CSS para o template ficar correto no IE6, IE7 e Firefox. Quando o IE7 foi lançado, ficou-se um tempo pensando que não havia hack para ele. Bobagem, a Microsoft não consegue fazer nada sem algum problema, que acaba nos ajudando.
Como muitos devem saber, o Firefox não tem hack para CSS. Portanto, você deve fazer funcionar primeiramente nele, e de tabela tentar fazer funcionar no IE7 - que tem renderização muito semelhante.
Depois, se falhar no IE6, utilize do famoso hack do underline na frente da propriedade:
#elemento {
background-color: blue;
_background-color: red; /* apenas para IE6 */
}
Caso fique algum problema no template para o IE7, use o seguinte hack:
#elemento {
background-color: blue;
*background-color: red; /* altera propriedade do IE6 e IE7 */
_background-color: blue; /* apenas IE6 */
}
Perceba acima que o hack para IE7 funciona também para o IE6, por isso uma última regra para reverter o efeito da propriedade do IE7.
O CSS Browser Selector é um javascript que coloca uma classe específica para cada tipo de navegador na tag html.
Dessa forma, quando você precisa de um hack CSS para o IE6, seu CSS ficaria parecido com isso:
.ie #elemento { color: blue; }
.ie7 #elemento { color: red; }
Você pode ver mais exemplos no próprio site do desenvolvedor.
Já usei uma vez esse script, mas acredito que dessa forma seja mais fácil voltarmos alguns anos atrás, onde existiam dois arquivos CSS - um para o Firefox e outro para o IE.
É bem interessante, mas eu ainda acho melhor usar o hack padrão dos browsers, ou ainda tentar re-estruturar o HTML ou CSS, do que usar o script, que, por pura preguiça, acabamos não tentando resolver o problema - que muitas vezes é simples - e partimos logo para uma regra nova no CSS.
Já consegui diversas vezes criar um template sem a utilização de hacks. Mas quando o template é um pouco mais elaborado, as vezes não compensa sair dos padrões de HTML e dificultar a acessibilidade para poder validar o CSS.
O que vale é o bom senso.
12 Responses for "Hacks CSS para IE6 e IE7"
Nao consigo deixar o height do div igual no ie6, ie7 e firefox!
Fabio,
Você precisa fazer algo parecido com isso:
#elemento { height: 50px; *height: 30px; /* altera propriedade do IE6 e IE7 */ _height: 20px; /* apenas IE6 */ }[]s
Obrigada pela dica :)
essa solução, underline e asterisco, é idealmente simples , meu unico problema é que elas não possam no validador (o que pra quem usa o tidy é bem chato)
pro ie6 é possivel usar uma declaração do tipo * #id {
regras…
}
porque ele não reconhece o seletor, pena que no IE7 nos deixaram orfãos dessa opção =/
Excelente matéria!!
Simples e funcional!! Obrigada!!
Tenho a seguinte dúvida
temo uma div de uma tela que usa uma classe dinamicamente.
pagina A - > Classe A
pagina B - > Classe B
pagina C - > Classe C
nos navegadores IE7 e Firefox, a renderização da página ocorre normalmente, exibindo a classe correta e carrega um fundo tela correspondente, porém, no IE6 a classe é escrita no html, porém nao carrega a imagem.
Esse * aqui só está alterando o IE 7 :S
solução?
Ops, desculpa, correção IE 6 apenas.
Gustavo,
Cara valeu ai…. ajudou muito aqui com o IE6.
Funcionou com: *background-position e *width.
tudo bem,
minha primeira visita no site, e o assunto de interesse é hacks, infelizmente!!!
navegando no site encontrei um problema no qual me depado no dia-a-dia, no ie6 o site deu uma quebra no menu do lado direito onde encontra-se as categorias, links, meta, etc…
qual seria a solução para o problema?
e pq no css abaixo a diferença de valores: 50, 30 e 20 px?
#elemento {
height: 50px;
*height: 30px; /* altera propriedade do IE6 e IE7 */
_height: 20px; /* apenas IE6 */
}
abs
Bom dia, amigos.
Estou com um problemão com relação a utilização do a:active e o a:focus para rodar no IE6. Criei uma galeria de imagens totalmente em css. Ela funciona perfeitamente no FF2/3 e no IE7, já no IE6 ao clicar nos thumbnails continuamente, a imagem em tamanho real,em alguns momentos, não é carregada. Creio que este problema seja pq o IE6 não suporta o :active e o :focus. Será que utilizando o hack estrela no meu css eu resolveria este problema no IE6?
Agradeceria imensamente as dicas e parabéns pelo espaço.
ötimo post!
parabéns!
Leave a reply