Imagino você fazendo o seu website seguindo as boas práticas e regras do W3C, usando as novidades do CSS3 e quando vai testá-lo no Internet Explorer tudo aparece  errado. Eu também sou a favor da extinsão deste browser que não merece a honra de ser colocado nesta categoria. Também acho que o problema de incompatibilidade é do IE e não do seu website e por isto eu criei uma extensão para jQuery que poderá te ajudar sem que você precise incluir novas classes no seu HTML, testar se é IE e simplesmente transformar o seu HTML limpo em algo horrososo.

Infelizmente esse código apenas ajuda com os seletores. Nenhuma propriedade do CSS3 irá funcionar se já não for padrão do IE.

Entendendo

  • Quando um seletor CSS não é suportado pelo Internet Explorer 6 e 7, eles são considerados unknown. O mesmo não acontece com o Internet Explorer 8. Ele não retorna nada e por isso a classe não pode ser encontrada.
  • Devido o IE 8 não considerar a existência de qualquer seletor CSS que ele não suporta, precisamos ativar o modo de compatibilidade do IE 7 adicionando a meta-tag HTTP <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> como o primeiro elemento dentro da tag <head />.
  • Nas suas classes que usam os seletores do CSS3 você precisa adicionar na última posição a propriedade selector. Copie o(s) seletor(es) e cole nesta propriedade. Exemplo: div:nth-child(odd){ background-color:#CCC; selector:div:nth-child(odd); }.
  • Chame $.CSS3ForIE();. Esta função irá ler os seus arquivos CSS, procurar pelas propriedades selector, copiar os valores que corresponde ao seletor da classe, fazer deles seletores do jQuery e aplicar.
  • O seletor deve ser um seletor do jQuery válido. A única exceção é o :hover. Este plugin faz os ajustes necessários para aceitá-lo.

Instalação

  1. Faça o download dos arquivos.
  2. Adicione os seguintes arquivos no seu HTML
// If you don't have the jQuery file already informed, insert the code bellow
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>

// Insert the following code after the jQuery code in your website if you prefer the compact version or ...
<script type="text/javascript" src="source/CSS3-Selector4-IE-0.9.0-min.js"></script>

// ... insert the following if you prefer the development version
<script type="text/javascript" src="source/CSS3-Selector4-IE-0.9.0.js"></script>

Como Usar

Primeiro adicione a chamada da função no seu HTML e a meta-tag que ativa o modo de compatibilidade como o primeiro elemento na tag head.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<script type="text/javascript">
$(document).ready(function(){

    $.CSS3ForIE();

});
</script>

Agora procure os seletores CSS3 nos arquivos de estilo e adicione o a propriedade selector e copie e cole o seletor.

// It adds a background-color to the first line for all tables
table{ border:solid 1px #333; }
table > tr{ background-color:#F00; selector:table > tr; }

// It adds a background-color to every odd cell
td:nth-child(odd){ background-color:#CCC; selector:td:nth-child(odd); }

// It adds a background-color to the last line
tr:last-child{ background-color:#F00; selector:tr:last-child; }

Exemplo

Visite www.darlesson.com/jquery/css3-selectors-for-internet-explorer/

Suporte

Este código é gratuito sob as licensas MIT e GPL. Mas se você acha que ele foi de grande ajuda economizando o seu tempo, por favor me dê suporte financeiramente através de uma doação ou adicione o link do meu site (http://darlesson.com/) no seu pra que possa continuar compartilhando, criando e melhorando meus códigos.

Para informar bugs, por favor envie comentários ou sugestões pela minha página de contato.