Suporte do CSS3 para Internet Explorer 6, 7 e 8

O que é isto

IE-CSS3 é um script para prover suporte para o Internet Explorer para alguns estilos disponíveis com o padrão CSS3.

Como ele trabalha

Se você estiver vendo esta página no Internet Explorer, alguns dos elementos foram reconstruidos pelo script em VML (Vector Markup Language), uma linguagem específica para o IE para desenho vetorial. VML suporta coisas que os IE's não renderizam como cantos arredondados e efeito blur.

Como usá-lo

Apenas adicione os estilos CSS como você faz normalmente, mas também inclua uma nova linha:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari e Chrome */
  border-radius: 15px; /* Opera 10.5+, outros navegadores recentes, e agora também Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, outros navegadores recentes, e IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* Isto faz o IE chamar o script em todos elementos com esta classe */
}

Problemas e Soluções

As URL's informadas em behavior: url(...) precisam ser relativas ao diretório atual assim como o estilo background-image: url(...) por exemplo, mas a Microsoft decidiu ignorar as normas e torná-los aqui em relação à raiz da página. Então behavior: url(ie-css3.htc) funcionará se ie-css3.htc estiver na raiz do site.

Você provavelmente vai ter problemas com o z-index, especialmente se a incorporação de um elemento IE-CSS3 ativada dentro do outro. Há duas soluções simples:

• Defina o z-index do elemento IE-CSS3 para um número maior do que seus elementos adjacentes.
• Certifique-se de elemento do IE-CSS3 está posicionado, como com position: relative ou position: absolute

Às vezes, um elemento IE-CSS3 irá aparecer em uma posição ligeiramente diferente do elemento original intacta. Pode haver algumas razões para isso:

• Você quebrou as tags em algum lugar de seu código, provavelmente acima do elemento IE-CSS3.
• Você está tendo erros diversos no IE6 e IE7. Tente adicionar estilos como zoom: 1 e/ou position: relative para o elemento IE-CSS3 e seu elemento pai. Você também pode tentar remover as margens do elemento IE-CSS3 e/ou utilizar padding em seus pais, em vez disso.

Estilos e seus status

Estilo	Como trabalha	O que não funciona
border-radius	Altera o radius para todos os cantos Bordas dos elementos	Configurar um radius para um canto separadamente
box-shadow	Tabamanho do blur Offset	Qualquer outra cor como #000
text-shadow	Tabamanho do blur Offset Cor	A sombra parece um pouco diferente do que acontece no FF / Safari / Chrome, eu não sei porquê

TODO

O melhor local para este script :)

Agradecimentos para Remiz Rahnas por escrever o roteiro original que este é baseado.
Original: http://fetchak.com/ie-css3/

Baixar HTC