<http://schema.org/articleBody>
"&lt;h3&gt;O que s\u00E3o os CSS Hacks?&lt;/h3&gt;\r\nCss Hacks n\u00E3o s\u00E3o mais do que \u201Cgambiarras\u201D no c\u00F3digo do css que abusam de erros de renderiza\u00E7\u00E3o dos navegadores.\r\n&lt;h3&gt;Para que serve?!&lt;/h3&gt;\r\nTalvez voc\u00EA j\u00E1 enfrentou um problema parecido:\r\nQuando voc\u00EA est\u00E1 implementando um layout, e compara o resultado em v\u00E1rios navegadores, percebe que ficou certo em dois deles mas exclusivamente em um, ficou totalmente diferente. Voc\u00EA sabe que o defeito \u00E9 simples de ser resolvido\u2026 sabe que \u00E9 s\u00F3 mudar o tamanho do div, para fazer funcionar, mas se voc\u00EA o fizer, vai dar defeito nos outros dois navegadores que estavam certos. Ent\u00E3o, O que fazer?\r\n\r\n\u00C9 exatamente aqui que entra o Css Hack.\r\nVoc\u00EA ir\u00E1 us\u00E1-lo para fazer funcionar seu layout neste \u00FAnico browser que est\u00E1 errado.\r\n\r\nEm suma: Css Hack \u00E9 um c\u00F3digo CSS que faz funcionar ou n\u00E3o, um certo c\u00F3digo CSS em um browser.\r\n&lt;h3&gt;Existem quantos tipos?!&lt;/h3&gt;\r\nExistem v\u00E1rias formas de fazer os Hacks de CSS. Basta procurar no google o tipo de hack que voc\u00EA deseja.\r\n\r\nHacks que escondem c\u00F3digo css para Netscape, Opera, Mozilla, IE para Mac, e por a\u00ED vai.\r\nO fato \u00E9 que voc\u00EA quase n\u00E3o ir\u00E1 usar hacks para estes browsers, e sim, para o grande venerado Internet Explorer para PC.\r\n\r\nVou ensinar aqui 2 tipos de hack. S\u00E3o os dois que eu mais uso. Como os problemas acontecem na maioria das vezes com o Internet Explorer, voc\u00EA precisa apenas de um hack que esconda o css deste browser ou que fa\u00E7a o c\u00F3digo funcionar apenas nele.\r\n&lt;h3&gt;Exemplo 1&lt;/h3&gt;\r\nEste hack far\u00E1 com o que certo c\u00F3digo CSS funcione apenas nele. Ou seja, apenas o Ie vai reconhecer o hack, os outros browsers v\u00E3o ignorar.\r\nIsso funciona em Internet Explorer 5, e o 6 se estiver funcionando em Quirks Mode (assunto para outro artigo).\r\n&lt;pre&gt;div { width:500px; }&lt;/pre&gt;\r\nNo c\u00F3digo acima fizemos todos os divs terem 500 pixels de largura.\r\nSuponha que por alguma raz\u00E3o, com este tamanho de largura, o layout ficou bagun\u00E7ado apenas no Internet Explorer\u2026 no Firefox, Opera, Konqueror, Safari, Galeon, e etc ficou certinho.\r\nVoc\u00EA precisa ent\u00E3o fazer com que esse tamanho diminua apenas para o Internet Explorer, veja o c\u00F3digo abaixo:\r\n&lt;pre&gt;div { width:500px; _width:400px; }&lt;/pre&gt;\r\nNote que coloquei um underline na segunda propriedade.\r\nTodo browser decente n\u00E3o entender\u00E1 essa propriedade e a ignorar\u00E1, pelo simples motivo de que n\u00E3o existe nada no CSS que tenha um underline na frente da propriedade. Isso \u00E9 errado, n\u00E3o existe, portanto \u00E9 ignorado.\r\n\r\nMas por algum motivo obscuro, o Internet Explorer aceita essa propriedade.\r\nLogo, no Internet Explorer, a largura dos divs somente no Internet Explorer ter\u00E3o 400 pixels de largura.\r\n\r\n&lt;strong&gt;Aten\u00E7\u00E3o.&lt;/strong&gt;\r\nEsse hack deve vir depois da propriedade correta. Se vir antes, o IE aceitar\u00E1 a \u00FAltima propriedade que vier, ela sobrescrever\u00E1 a propriedade underline e dar\u00E1 prioridade para a propriedade que est\u00E1 sem underline.\r\n\r\nOutra coisa: Esse hack faz seu CSS n\u00E3o ser validado pelo W3C.\r\nNesse caso, voc\u00EA decide.\r\n&lt;h3&gt;Exemplo 2&lt;/h3&gt;\r\nNesse exemplo, usarei um seletor que ir\u00E1 ser desconhecido de muitos. N\u00E3o vou entrar em muitos detalhes. Sinta-se \u00E0 vontade para pesquisar pela internet. Abaixo temos o seguinte seletor\r\n&lt;pre&gt;div&gt;p span { background-color:red; }&lt;/pre&gt;\r\nAgora preste aten\u00E7\u00E3o no c\u00F3digo HTML:\r\n&lt;pre&gt;\r\n&lt;div&gt;Aqui vai o texto.&lt;/div&gt;\r\nO seletor de css acima funciona assim:&lt;/pre&gt;\r\nTodo ?span? que estiver dentro de um ?p? que por sua vez seja diretamente filho de um ?div? ter o a cor de fundo vermelha.\r\nEnt\u00E3o, se tiver algum outro ?span?, dentro de um ?p?,  mas que n\u00E3o esteja dentro de um  ?div?, n\u00E3o ter\u00E1 o fundo vermelho.\r\n\r\nEu prometo (ai, l\u00E1 vem) que tentarei fazer um artigo explicando seletores. \u00C9 um assunto bastante interessante e vale a pena estudar.\r\n\r\nBem\u2026 Agora voltemos ao tema do artigo.\r\nO Internet Explorer simplesmente n\u00E3o reconhece este seletor, ele n\u00E3o sabe que isso existe, n\u00E3o sabe que faz parte do CSS. Portanto, ele ignora totalmente.\r\n\r\nEnt\u00E3o, se voc\u00EA quisesse fazer com que os spans tivessem uma cor de fundo diferente de vermelho no Internet Explorer, voc\u00EA faria assim:\r\n&lt;pre&gt;span { background-color:blue; }  div&gt;p span { background-color:red; }&lt;/pre&gt;\r\nO Ie, relevaria o primeiro c\u00F3digo. Ele n\u00E3o reconhece o segundo seletor, logo ele ignora.\r\n\r\nInteressante notar que ele reconhece um c\u00F3digo que n\u00E3o existe e n\u00E3o reconhece outro que existe. &lt;img width=\"18\" height=\"18\" title=\":-D\" class=\"wp-smiley\" alt=\":-D\" src=\"http://tableless.com.br/smilies/yahoo_bigsmile.gif\" /&gt;\r\n\r\nTodos os outros navegadores que tem uma melhor abordagem ao css, reconhece este seletor e n\u00E3o ignorar\u00E1.\r\nUso muito esse hack porque ele n\u00E3o impede que seu CSS valide.\r\n\r\nAqui est\u00E3o 2 Hacks para voc\u00EA usar abusar. Vai ao seu gosto escolher qual dos dois voc\u00EA usar\u00E1.\r\nO primeiro tem menos c\u00F3digo, embora n\u00E3o valide. O segundo valida, mas usa mais linhas de c\u00F3digo para ser feito."^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/csshacks/>