hack css para IE7 (internet Explorer 7)

[Fabio Paixao 0]

Senhores usuários, boa tarde!

 

 

Para aqueles que estão com dificuldades em renderizar suas páginas a partir do IE7, existe um hack que resolve este problema.

 

A solução está em colocar um asterisco no início da propriedade.

 

--------------------------------------------------

Exemplo:

 

body { 
color:green; 
*color:red; /* esta propriedade só funciona no IE7 */ 
}

 

Outra solução seria criar um arquivo css separado para a propriedade. Por exemplo:

 

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

 

---------------------------------------------------

 

A solução é simples, mas, evita muitas dores de cabeça.

 

Obrigado.

[Thiago Retondar 18]

Costumo não usar hacks. Ao máximo dos máximos uso comentário condicional.

 

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML » Artigos, Tutoriais e Matérias (Webstandards)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Victor Morais 0]

Como posso configurar 3 folhas de estilo diferentes?

 

Sendo uma para o I.E 6, outra para o 7 e a seguinte para o demais.

Ou seja, o que quero saber é, como ao usúario acessar o site automaticamente escolher a folha de estilo que se adepta ao navegador em uso?

 

Abraços a todos!

[Thiago Retondar 18]

Com comentários condicionais.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Victor Morais 0]

Com comentários condicionais.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

É exatamente como coloca-los que eu quero saber.

Pode me dar um exemplo para os três ( IE 6, 7 e outros )?

 

Abraços

[Thiago Retondar 18]

Só pesquisar http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/252206-comentarios-condicionais

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Paulo de Tarso F. M. 24]

Pessoal, quem precisar utilizar uma formatação específica no IE6 e no IE7, mas não quer utilizar comentário condicional e muito menos um hack, pode fazer o seguinte:

 

Imagine que temos a seguinte formatação:

div#header { margin:0 0 10px; }

Mas, por cargas d'água, a margem inferior fica com 20px no IE7 no IE6 (isso é só um exemplo, hein?). Imagine ter que criar um arquivo CSS específico só por causa disso, ou ainda ter que realmente utilizar os hacks underline para o IE6 e o asterisco para o IE7 (nesse caso, apenas o hack do asterisco seria suficiente, pois tanto o IE6 quanto o IE7 entendem). Isso não é necesário! Para elaborar um código válido, sem hacks, vejam como ficaria:

div#header { margin:0 0 20px; }

/* "Hack" para o IE6 */
* html div#header { margin:0 0 5px; }

/* "Hack" para o IE7 */
*:first-child+html div#header { margin:0 0 5px; }

Seu código ficaria maior, mas ainda assim seria validado. Outra coisa, nesse exemplo vamos imaginar que nos IEs a margem estaria sendo duplicada, e por isso eu defini uma margem de 5px, pois, quando renderizado, seria exibido com 10px, que é o propósito, mas reforço que é apenas para demonstrar, não que esse problema realmente aconteça dessa forma e nessas condições.

 

E só uma observação para aqueles que não sabem porquê utilizar os hacks underline e asterisco não validam e essa outra forma valida: o validador do W3C não atua em cima dos seletores, mas sim sobre as propriedades e seus valores. Então, mesmo que eu escreva um seletor assim:

div#minha-div classe-sem-o-ponto { color:#f00; }
div#minha-div .classe-com-o-ponto { color:#f00; }
div#minha-div .classe-com-o-ponto { _color:#f00; }

O código não seria validado apenas por causa da terceira linha, devido ao underline na frente do color, afinal, não existe uma propriedade CSS chamada _color. A primeira linha simplesmente não funcionaria porque está faltando o ponto antes do nome da classe, mas mesmo assim ela não seria indicada no validador justamente porque a propriedade está correta, é só o seletor que não, e a segunda linha funcionaria normalmente.

 

Espero que isso ajude a esclarecer dúvidas daqueles que não entendem o porquê de algumas vezes um código validar e outro não...

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Fabio Paixao 0]

Victor, um exemplo bem simples que acredito que responda à sua pergunta seria o seguinte:

 

Primeiro crie um documento html comum para fazer o teste. Salve-o com um nome qualquer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comentários Condicionais</title>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="yellow_green.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="red_blue.css" />
<![endif]-->
</head>

<body>
<h1>
Utilizando Comentários Condicionais!
</h1>
</body>
</html>

Em seguida, vem a primeira folha de estilo. Salve-a como red_blue.css

 

/* red_blue.css */
h1 {
    color: red;
    background: blue;
   }
	

Agora crie a segunda folha de estilo. Salve-a como yellow_green.css

 

/* yellow_green.css */

h1 {
    color: yellow;
    background: green;
   }

Salve-os em uma mesma pasta para facilitar a execução. Agora está pronto, se você estiver utilizando IE7 vai ser executado o arquivo "red_blue.css". Se você estiver utilizando o IE8 vai aparecer o arquivo "yellow_green.css".

 

O exemplo é bem simples. É só para facilitar o entendimento.

 

OBS: Só funciona no IE.

 

Abraços :)

 

Fábio Paixão

@fpmarcos