14/04/2010
Depois de tanto tempo de sofrimento para fazer uma sombrinha ou bordas arredondadas compatíveis com o IE no CSS, eis que encontro pela internet um arquivo HTC que promete resolver os problemas de compatibilidade do CSS3 nas versões 6, 7 e 8 do temido Internet Explorer.
HTC é sigla para HTML Components, um arquivo que aplica novos comportamentos em HTML Dinâmico dentro do Internet Explorer.
Como funciona?
Você precisa apenas adicionar uma referência ao comportamento pelo arquivo ie-css3.htc na seleção do CSS que tenha propriedades CSS3 como border-radius ou box-shadow. Veja um exemplo:
.caixa {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari e Chrome */
border-radius: 15px; /* Opera 10.5+
e agora também para Internet Explorer 6+ com IE-CSS3.htc */
-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+
e Internet Explorer 6+ com IE-CSS3.htc */
behavior: url(ie-css3.htc); /* Avisa ao IE para mudar o
comportamento desta classe e ela passa a entender o CSS3 */
}
Nota: O arquivo HTC precisa estar na mesma pasta do CSS.
Parece um sonho para desenvolvedores, mas é uma pena que a iniciativa não tenha vindo da própria Microsoft.
Faça download do script diretamente neste link.
André Farzat diz:
17/04/2010 as 15:35
Funciona perfeitamente com divs, mas não funfa com elementos com display: block;
Mas já quebra muito o ganho!
[Responder]
Jefferson Luís diz:
20/04/2010 as 23:54
Parabéns Richard, ótimo post isto é uma boa alternativa a esse velho problema.
[Responder]
Flávia Hilsdorf diz:
24/05/2010 as 11:33
Tive problema no IE ele não obedeceu o comando das bordas….
Coloquei o arquivo .htc dentro da pasta do CSS.
O meu código ficou assim:
#links{
width: 631px;
min-height: 200px;
float: left;
margin-left: 15px;
margin-top: 45px;
border: 1px solid #00C;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
behavior: url(ie-css3.htc);
}
Podem me ajudar?
[Responder]
André diz:
09/06/2010 as 09:53
tente botar assim:
behavior: url(css/ie-css3.htc);
[Responder]
João Carlos Reply:
André, sua dica funcionou blz, aqui pra mim! Obrigado!
Gizaa Veiga diz:
21/06/2010 as 14:31
E como usar esse script no blogger?
Tentei hospedar o arquivo e colocar a chamada e não funcionou, nem colocando o script direto no meu html…desenha pra min?rsrs
[ ]s
[Responder]
Samira diz:
24/06/2010 as 15:36
ele é bom mas zoa num aspecto redimencionamento de paginas, ele simplesmente desloca o background de forma grotesca alguém sabe alguma solução?
[Responder]
Rodrigo diz:
09/07/2010 as 02:01
Parece que a um conflito com o jquery tbem, fiz testes aqui em páginas que uso jquery e gerou erros de js.
[Responder]
Jozeias diz:
10/07/2010 as 16:17
Até o Chrome já aceita “border-radius” assim mesmo é o Individualista IE e preprotente IE recusa em respeitar normas que já se usam a decadas e não fazem enhum pouco de esforço em corrigir seus sistemas, apesar de haver gama de formas pra termos que escrever nossos codigos , pois cada navegador responder a um, só excelentrissimo IE temos que recorrer a code javas enormes pra corrigir, falhas que o intepretador IE destorce ou não aceita, alem de lento e burro, por algum motivo torpe ainda se mantem na liderança do navegadores ou e falta de conhecimento de navegadore melhores por parte da população, ou medo de conhecer coisas diferente, o diferente dá medo. e a ignorancia impera………………
[Responder]
Miguel diz:
12/07/2010 as 14:42
Alguem que usa jQuery conseguiu usar o ie-css3.htc com sucesso?
Se puderem me ajudar agradeço mto ..
Valeu
[Responder]
R. A. Souza diz:
28/07/2010 as 22:17
Nossa.. perfeito! Descobri isso hoje, por que esbarrei com essa componente na internet hoje no trabalho.Ótimo post!
[Responder]