Tableless - Desenvolvimento inteligente com Padrões Web

26/04/2007
Browsers

CSS Hack para o IE 7 – se alguém precisar

Ontem precisei de um hack para IE7. Fiz uma busca rápida e encontrei algo bem fácil. Lembra do csshack para IE que você colocava um _ (underline) na frente da propriedade que você gostaria que só o IE entendesse? Pois …

Por

Ontem precisei de um hack para IE7. Fiz uma busca rápida e encontrei algo bem fácil.

Lembra do csshack para IE que você colocava um _ (underline) na frente da propriedade que você gostaria que só o IE entendesse? Pois é… ele não funciona no IE7. Mas… se trocarmos o _ (underline) por * (asterísco) ele passa funcionar! :-)

1
2
3
4
div {
background:green;
*background:red; /* essa linha funciona no IE7 */
}

Fizeram o underline parar de funcionar, mas esqueceram do asterísco. ;-)

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

Newer Comments →
  • http://www.pinceladasdaweb.com.br Pedro Rogério
    1
    *+html div{background:green;}
  • http://www.antenando.com.br Rael B. Riolino

    vai precisar mesmo…

    o IE7 só veio parar complicar ainda mais a nossa vida! :-(

    Valeu pela dica! Muito útil! ;-D

    Abraço

    Rael

  • http://www.danilocesar.com Danilo Cesar

    Mas funciona também no IE6, ou preciso definir 2 hacks?

  • http://www.officinapropaganda.com.br Bruno F. Santos

    Poxa dessa eu não sabia ..
    eu precisei de hack pra IE7 algumas vezes já
    mais eu sempre usava isso:

    1
    2
    3
    < ! -- [if IE 7]  >
    < link rel="stylesheet" type="text/css" href="css/iehack.css" />
    < ! [endif] - - >

    ae quando fosse o IE7 ele lia o css e arrumava ..

    vou testar essa do asterisco tb!
    haha
    valeu!

    desconsidera os outros comentarios ;)

  • Mariorez

    Eu uso e recomendo o “CSS Browser Selector”:
    http://rafael.adm.br/css_browser_selector/
    JavaScript simples e prático que resolve meus problemas de CSS Cross-Browser / Cross-Os:
    Browsers:
    * ie – Internet Explorer (All versions)
    * ie6 – Internet Explorer 6.x
    * ie5 – Internet Explorer 5.x
    * gecko – Mozilla, Firefox, Camino
    * opera – Opera (All versions)
    * opera8 – Opera 8.x
    * opera9 – Opera 9.x
    * konqueror – Konqueror
    * webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira

    Os:
    * win
    * linux
    * mac

  • Carlos

    Esse metodo de hack não seria melhor? Faz a melhor forma no IE e depois hackeia pros demais browsers (FireFox)…

    http://www.revolucao.etc.br/archives/hacks-hack-hacks

  • http://julioweb.wordpress.com Julio Fragoso

    Essa eu sabia, o chamado star hack !

    quanto ao do Rael, acho que o IE 7 consertou muitos bugs de renderização, mas ainda restam outros, e acho que está melhor que o IE 6.

    Mas falta muito para ficar nível ótimo.

  • http://forumgeral.com Ederson Spader

    Pensava que não mais seria necessário o uso de hacks! mais fazer o que :)

  • http://willgm.com William Grasel Martins

    Ao que parece vocês ainda não descobriram os conditional comments…

    O link original da Microsoft explicando o assunto esta dando 404, mas tem esse no IEBlog.

    Resumindo, em vez de desvalidar seu CSS com um hack como o que foi citado neste post, ou ficar pesquisando seletores que não funcionam no IE7 para usar como hacks, você pode fazer apenas isso:

    1
    2
    3
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="iehacks.css" />
    <![endif]-->

    Veja o link original, atualmente quebrado, caso volte a funcionar ou a página do Maujor explicando o assunto.

    Abraços!

  • http://vedovelli.com.br Ved

    É impressionante como a Microsoft não aprende a fazer as coisas direito. Sempre dificultando a nossa vida! Um inferno!

  • http://groups.google.com.br/group/dreamug Rickks

    Interessante testar nos três browsers

    background-color: #FFF; Firefox
    *background-color: #afafaf; IE 7
    _background-color: #000000; IE 6

    quem tiver o IE 7 e quiser testar com IE 6,
    mas nao sabe como ter as 2 versões,
    é so baixar esse programinha aqui
    http://tredosoft.com/Multiple_IE

    ele instala o IE3 IE4.01 IE5 IE5.5 e IE6

    :D

  • http://kono.spaces.live.com/ Rodrigo Kono

    Olá Diego. Tudo bem? Conversava contigo nos tempos do ICQ. Faz tempo hein…
    Admiro seu trabalho e seu site. Sempre tem boas coisas… Acho show. Mas sinceramente sou contra os CSS Hacks. Acho que sempre existem formas de fazer ambos funcionarem bem sem HACKS. É minha opnião. E outra: Hacks invalida o CSS. =)
    Abração velho.

  • http://www.andersonsa.com Anderson Sá

    O ideal seria não precisar de hack, mas como nem sempre as coisas são como a gente quer. É jeito!

  • http://www.guiasaoroque.com.br Gustavo Moraes

    mto util esse post!!!
    eu tava precisando do hack esses dias!! e tive q mudar o jeito q tava fazendo, pq nao sabia o hack pra IE 7!! Parabens! valew!

  • http://www.corporacaoweb.com Fill

    Dessa eu não sabia mas não seria melhor usar comentários condicionais?

  • http://www.tribodejuda.com Nickael Almeida

    Ola Galera…
    Gostei do post a nível de conhecimento.
    Mais também prefiro usar os comentários condicionais penso que deixa nosso código mais elegante. :d

  • http://www.csslab.cl Jorge Epuñan

    conditional comments eh a solucao para IE, e valida o CSS.

  • Jhony

    Descobriste o Brasil, véi!

  • http://www.netlus.com.br Rafael Dourado

    Meu IE7 está lendo o hack com underline.

  • http://onipresente.eti.br Augusto

    Pq o IE aceita isso e o Firefox não?
    Pq a M$ faz o browser tosco deles aceitarem essa porcaria?

  • Pingback: nerd.blog » Blog Archive » CSS Hack para IE 7

  • Douglas

    Estranho, aqui o IE7 não lê os underline não. Sobre os conditional comments, eles somente são melhores caso vc tenha que colocar vários hacks. No meu caso, tive que colocar 2…é muito mais pratico vc colocar dois hacks do que criar um outro css só pra isso.

    E dai que não valida 100% o CSSS? Pra que essa paranoia de ter que ser 100% validado o CSS?

  • http://medinadatoblogspot.com Renato Medina

    o firefox 2.0.0.3 também está lendo esse hack…

    de uma verificada…

  • http://www.site4.com.br Klederson

    Renato não viaja não velhinho, firefox não le hack ( so pra constar estou no 2.0.0.3 agora e não le nem _ nem * nem condicional…

    Valeu pelo * ae povo eu nao sabia e o IE 7 vive me dando dor de kbça como por ex o ajax nele, tive q criar uma solucao mirabolante pra poder fazer mais de uma requisição usando o xmlHTTPResquest…

    Valeu mesmo!

  • ski

    Cara, MUITO obrigado!

    Eu tava desesperado, pq essa bosta de IExplorer não funciona nada direito, coloca magens aonde não existe e td o mais, e não funciona(va) os hacks.

    Eu já tinha xingado a Microsoft de todos os palavrôes que eu conhecia.. rs

    Obrigado demais cara.. Salvou meus CSS. =]

  • http://www.fred.etc.br Alfredo Stanquini Neto

    Exelente o * funciona direitinho, resolveu meu problema valew

  • http://www.fred.etc.br Alfredo Stanquini Neto

    Excelente o * funciona direitinho, resolveu meu problema valew.

  • Greogy Thiago

    powss…aki nao tah funcionando nao brother…
    nenhuma das opçoes..
    tipo

    se eu utilizar os comentários condicionais, mesmo assim, o ie 6 passa a entender o “iehacks”

    e o lance do asterísco, mesmo assim ele compreende….oq estaria errado??

  • http://www.joaquimnabuco.edu.br Thiago Azurem

    O correto é voce nao usar muitos hacks, se voce esta usando muito hack, alguma coisa voce nao esta entendendo da logica (ou logica de bugs) do CSS.

    Entao, se a intencao é que nao exista muitos hacks, nao acho necessario usar para separar apenas um CSS com hacks. Se sao poucos, voce pode por um embaixo do outro sem problemas.

    Acho importante o uso do quando realmente voce tem uma quantida de coisas que no IE7 diferencia, etc.

    Eis minha humilde opiniao.

  • http://www.joaquimnabuco.edu.br Thiago Azurem

    Caro Greogy,

    Voce necessita obedecer hierarquicamente o hack.

    Vamos supor que tenhamos que por diferentes margins (bug de margin com float) nos browsers.

    margin-right:10px; – TODOS -
    *margin-right:15px; – IE6 e IE7 -
    _margin-right:10px; – IE6 -

    Veja entao que o asterisco realmente nao resolveria seu problema, pois ambos agirão no IE 6 e 7, entao voce necessita passar o “_” para fazer apenas o do IE 6 depois.

  • http://www.wagless.com/homologa Wagner Ramon

    Meus caros, monto sites à mais de 5 anos, e quase sempre usei div’s ao inves de tabelas. Mas depois do firefox, bem ai começou esse inferninho. Confesso que no começo odiei o firefox, mas agora que comecei com a semântica, mudei drasticamente de opinião. Agora, o i. e 7, e tudo mudou de novo. Devo dizer que concordo em partes com o Douglas, hoje tem muita paranóia com a “semantica”. Existem milhões de foruns sobre isso. Eu acho que uma meia dúzia de hacks não mata ninguém.
    E tem mais. Vejam esse exemplo de hack:

    margin:10px auto!important;(firefox)
    margin/**/:/**/15px auto;(i.e6)

    Acreditem, a w3c, valida esse código! Agora isso “burla” os padrões, não sei. Agora, no i.e 7, não conheço nenhum hack validavel.
    Esse do * eu conhecia e confesso que é o que eu uso. Ainda mais quando tem position:absolute no elemento. é o que mais da diferença. Abraços a todos.

  • http://www.icf12.com.br Mateus

    Muito legal…

  • denia

    No caso de trocar o underline por asterisco na IE 7 fica ok e nas anteriores também???

  • Mateus

    background-color: #FFF; Firefox
    *background-color: #afafaf; IE 7
    _background-color: #000000; IE 6

    O problema deste código é que quando você usa algum !important não funciona.

    Mas !important realmente é a melhor solução o problema é que nem sempre o ie7 obedece a isso

  • http://www.oficinadanet.com.br Nicolas Muller

    O melhor é fazer o css sem hack nenhum, basta seguir os padrões web e obedecer, os tamanhos, exemplo uma div com 600px de largura, se tiver 10px de padding, não utilize width:600px; padding:10px; utilize: width:580px; padding:10px;
    você sempre deve reduzir da largura o nr de pixels que utilizar no padding.

    PS, utilizem a propriedade FLOAT, ela ajuda muito…

  • http://wrg.com.br Lucas

    PPPuuutss, só isso eu consigo burlar! Salvou minha vida, tava quebrando a cabeça com isso! Bem alguns optam pela importancia do padrão 100%, mas tb sou da opinião que, meia duzia de hacks não mata ninguém hehehehe

    abraços!

  • http://www.arvorenativa.com Igor Negrão

    Cara.. valeu pela ajuda.

  • Rodrigo

    Valeu pelo post muito bom, mas agora:”mas tb sou da opinião que, meia duzia de hacks não mata ninguém hehehehe” vai se fuder!vc e ie6/7/8/*

  • Chris Santos

    Valeu pela dica do *, resolveu meus problemas, mutissimo obrigado!!

  • http://portalcolmeia.com.br Roger Alves

    Você vê que coisa… eu precisei justamente de um hack para corrigir uma falha do firefox… ao que parece, algumas vezes ele não renderiza bem com o onmouseover do javascript, ao contrário do IE, que se comporta da maneira correta… então o que eu tive que fazer foi colocar da forma “errada” no css e usar esse recurso do asterisco para desconsiderar aquela formatação… coisas da vida… o IE pode não ser o melhor que há… mas o firefox também não é perfeito…
    Valeu mais uma vez, Diego Eis!

  • Andreia

    Oi Pessoal,

    Preciso da ajuda de vocês, pois sou ainda iniciante em desenvolvimento e estou criando um site para uma empresa mas, estou com problemas na hora de testar nos navegadores.

    Para os links do site criei a seguinte regra em CSS:

    Na hora de testar a página no Firefox 3 e Ópera 9.5, dá tudo certo, porém no IE7 as regras do link não funcionam.

    Tem algum código que me ajudaria a burlar esse problema no IE7?

    Ficarei muito grata pela ajuda, pois preciso terminar o site e esse problema está me atrasando o serviço todo.

    Obrigada e até breve!

  • Andreia

    Pois é, as regras que descrevi não apareceram…

    Seguem novamente:

    a:link {text-decoration: none;
    color: #000000;}
    a:visited {text-decoration: none;
    color: #666}
    a:hover {text-decoration: none;
    color: #fff; background:#c33;}
    a:active {text-decoration: underline;
    color: #ff9; background:#333;}

    Quero definir que a fonte seja Arial no Internet Explorer 7 também, mas não está aparecendo quando renderizo a página.

    Obrigada,

  • Phields

    O IE7 é muito bom, excelente navegador, o problema dele é tentar acertar os codigos, o que acaba fazendo com que tenha muito codigo mal feito espalhado por ae… Programar pra versoes de Browser (IE6 e 7 / Firefox 2 e 3) é pra poucos…

  • http://rangelweb.site88.net Rangel

    Valeu!!!hj msmo eu tava tentando fazer o underline funcionar e nao estava, dai resolvi ver as novidades aki no meu site preferido valeu!!!!! (*) kem será o próximo depois?? haha abraços.

  • http://www.bnshost.org LoG

    Show! Bendito Tableless! Me salvou.

  • Alessandro

    Valeu Diego! Eu estava precisando dessa dica.

  • Wanderley Rocha

    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.

  • Wanderley Rocha

    Amigos, bom dia.
    Parabéns pelo espaço.
    Como posso fazer para que o a:active e o a:focus sejam suportados pelos IE6 da mesma foram que funciona para o IE7 e FF3?
    Criei uma galeria de imagens em css e quando rodo no IE6 algumas falhas de renderização apareceram. Será que utilizando o hack “_” à frente da classe eu corrijo esta falha?
    Muito agradecido.
    Abraços

  • http://www.chrisb.com.br Chris Benseler

    Eu achava que jamais ia precisar de um hack pro IE7 – tinha abandonado há tempos os do IE6, mas eis (sem trocadilho!) que estou aqui fazendo um freela de última hora que o cliente tá totalmente necessitado e me deparo com uma situação que vou ter que usar isso. Que beleza!

  • http://www.viconcursos.com viconcursos

    parabens pelo seu artigo mas acho que essa onda de IE 7 e ate mesmo o 6 ta complicado de programar viu o FF funciona ate mesmo com ajax ou jquery perfeito ja nos IEs da vida nao … eita.. o que fazer heim..! esse povo tinha que pensar em nos na hora de fazer esses navegadores em vez de pensar nas rivalidades.. vlw

Newer Comments →