Vitor A. Vale

Existem diversas formas de se adicionar suporte ao CSS3 para o IE, esta é apenas mais uma delas mas sem duvida a minha favorita por funcionar perfeitamente bem.

O que é?

IE-CSS3 é um script (.htc) que pode ser utilizado dentro de seu CSS (aplicando behavior:url(ie-css3.htc) no elemento) habilitando o suporte no IE para dois itens muito utilizado na construção de sites atualmente: border-radius e box-shadow.

Como usá-lo?

Para utilizar basta aplicar o estilo normalmente incluindo ao final a nova linha:

.section{
  /* Borda arredondada */
  -moz-border-radius: 10px; /*Firefox*/
  -webkit-border-radius: 10px; /* Safari e Chrome */
  border-radius: 10px; /* Opera 10.5+, navegadores futuros, e agota também o IE(gte 6) usando IE-CSS3 */

  /* Sombra */
  -moz-box-shadow: 10px 10px 20px #000; /*Firefox*/
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari e Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, navegadores futuros, e agota também o IE(gte 6) usando IE-CSS3 */
  /* IMPORTANTE */
  behavior: url(ie-css3.htc); /* Informa ao IE para ativar o script nos elementos desta classe */

}

Problemas e Soluções

Ocorrem alguns problemas com o z-index, principalmente quando você utiliza um elemento com o IE-CSS3 ativado dentro de outro, existem duas soluções simples:

- Definir o z-index do elemento filho maior que seus elementos pais

- Certificar-se que o elemento que está com o IE-CSS3 ativado esteja posicionado (position: relative ou absolute)

Download e informações: http://fetchak.com/ie-css3/
Obs: Ele só irá executar quando seu projeto estiver rodando em um servidor web (Apache, IIS…) ;D