Rode propriedades do CSS3 no Internet Explorer

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.

Tem sede de design e código? Siga-me no Twitter @richardbarros

50 comentá em “Rode propriedades do CSS3 no Internet Explorer

  1. André Farzat 17/04/2010 15:35

    Funciona perfeitamente com divs, mas não funfa com elementos com display: block;

    Mas já quebra muito o ganho!

    Responder

    james Reply:

    concordo contigo Andre!!

  2. Jefferson Luís 20/04/2010 23:54

    Parabéns Richard, ótimo post isto é uma boa alternativa a esse velho problema.

    Responder

  3. Flávia Hilsdorf 24/05/2010 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

    Henrique Pacheco Reply:

    É que o autor colocou uma informação errada. Se o “caminho” declarado para o .htc for relativo, será relativo à página que o usuário está, não ao css. Prefira colocar caminhos absolutos.

    use assim: {behavior: url(“/ie-css3.htc”);} e coloque o .htc na pasta raíz do site.

  4. André 09/06/2010 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!

  5. Gizaa Veiga 21/06/2010 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

  6. Samira 24/06/2010 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

  7. Rodrigo 09/07/2010 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

  8. Jozeias 10/07/2010 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

    Cleber Reply:

    Concordo contigo.
    Além do mais a verdade é que a grande maioria dos usuários, não se interessam pelo melhor, usam o que já está fácil pra eles e julgam ser o “melhor”. Como IE já vem instalado, para o usuário fica tudo mais “SIMPLES” porém complicado para nós. Por isso, precisamos nos aprofundar cada dia mais em IHC, pois os usuários estão a cada dia, mais preguiçosos e querendo ou não é nossa (programadores) função deixar tudo mais simples mesmo para eles. rs é isso !! fazer o que !! ..vlw

  9. Miguel 12/07/2010 14:42

    Alguem que usa jQuery conseguiu usar o ie-css3.htc com sucesso?

    Se puderem me ajudar agradeço mto ..

    Valeu

    Responder

    Erick Reply:

    Cara, usa o No.Conflict do jquery, que funciona perfeitamente.

  10. R. A. Souza 28/07/2010 22:17

    Nossa.. perfeito! Descobri isso hoje, por que esbarrei com essa componente na internet hoje no trabalho.Ótimo post!

    Responder

  11. Claudio 09/09/2010 20:33

    Boa noite

    Estou com pequeno problema, quero saber se posso colocar IE-CSS3.htc em outra pasta, já tentei várias vezes mais não da certo. Ex:/novo/template/ght/IE-CSS3.htc não está sendo aplicando o efeito. Fiz esse mesmo procedimento local e funcionou blz, mais quando passei os arquivos para a web não deu certo.

    O post foi show.

    Grato pela a atenção

    Responder

  12. Henrique Menezes 15/10/2010 00:31

    Alguém já trabalhou com esse arquivo no zend framework?
    não consegui fazer funcionar!

    Responder

  13. Johnny Almeida 20/10/2010 10:02

    Olá, estou fazendo um página na que uso dois divs com a propriedade “border-radius”, uma delas com imagem, só que no Internet Explorer a imagem some, literalmente. Alguém mais teve esse problema? Sabe como resolver? Aqui o link do exemplo: http://johnnyalmeida.eu5.org/testes

    Responder

  14. Thiago 22/10/2010 19:45

    Cara na minha opinião é desvantajoso usar scripts ou htc para colocar uma simples borda arredondada, isso deixa o dom carregado e com scripts atoa, vale mais fazer uma imagem “sprite” e assim diminuir o overhad da página com isso seu codigo fica muito limpo.

    Meu Postifólio……

    http://www.tkp.com.br/

    Responder

    Johnny Almeida Reply:

    No meu caso, o problema é que estou usando um banner dentro de uma div que representa o “corpo” do site, que tem um width variável… Então a imagem também precisa ter, e essa imagem precisa ter a borda redonda para “encaixar” no corpo, pq se não, ela fica com as pontas para “fora”… E como ela também possui um tamanho variável que depende do tamanho do “corpo”, fica bem complicado resolver isso usando as imagens…

  15. juan 23/11/2010 20:26

    Senhores Webdesign; vamos criar uma campanha para que os usuários atualizem seus navegadores, com mensagens e avisos informando que o site posteriormente não irá ser aberto com o navegador que esta usando. a própria microsoft esta fazendo propaganda em um dos seus exemplos do IE-9 do Google chrome. http://ie.microsoft.com/testdrive/HTML5/ECMAScript5Breakout/Default.html
    obs: só pode ser visualizado no google chrome.

    Responder

    EZEQUIEL RAMOS Reply:

    Já estou fazendo isto nos meus sites….IE nunca mais…enquanto não se atualizarem e sairem de 1995 rsrs.

    faço uns sites bem leves , css, jquery…olho no Opera, Google, safari , mozila,,,tudo maravilha,,,Quando chega no IE…a vontade é quebrar tudo…

  16. Michele 29/11/2010 07:11

    Obrigada pelo código, funcionou certinho.
    Mas tem um problema, ao carregar a página aparece um fundo preto onde tem as bordas arredondadas e depois desaparece. Meu site tem background branco, como eu faço para não aparecer esse fundo preto?

    Responder

  17. Luciano Melo 09/07/2011 03:08

    AJUDA MUTUA
    1 -O primeiro passo é ter R$ 12,00 (doze reais). Deposite R$ 2,00 na conta de cada pessoa que esta na lista, no final da carta e já estará participando do programa.
    2 -Depois de depositar R$ 2,00 em cada conta, refaça a lista do final desta carta incluindo o seu nome e a sua conta bancaria, na ultima posição da lista, elimine o nome que esta na primeira posição para que fiquem somente seis participantes por lista (é extremamente importante respeitar a seqüência para que tudo de certo). Esta lista tem que ser feita corretamente para que todos possam ganhar. Não mude a posição dos nomes, não tente colocar seu nome em lugar diferente pois não funcionara. O seu nome tem que percorrer a lista da ultima ate a primeira posição para que você receba tudo oque o programa oferece. Se agir com honestidade e de acordo com as instruções você ganhará, no mínimo, R$200.000,00 (duzentos mil reais).3 -Com a nova lista pronta faça 250 copias ou mais se desejar, pode ser feito em gráficas, no computador ou xerox.

    Quanto mais copias você enviar melhor será o resultado. Podem ser enviadas por e-mail.
    Durante noventa dias você estará recebendo a sua parte também que pode ultrapassar os R$200.000,00 (duzentos mil reais) se todos fizerem 250 copias. As pessoas que aderirem farão apenas seis depósitos de R$ 2,00 uma única vez. DOIS REAIS EM CADA CONTA.
    Faça os depósitos por transferências, pela internet.E ofereça as outras pessoas, a mesma oportunidade que esta tendo neste momento. Pense bem nisso: o sucesso deste programa é garantido quando seguido corretamente, só depende de você. Não é pirâmide, não é corrente e muito menos marketing pessoal. Muitas pessoas ao receberem não entenderão que é apenas uma AJUDA mútua.. Se algumas pessoas não aceitarem, não desista, faça a sua parte. O sucesso só de pende de você.

    *Nome-Cleber Gabriel Da Silva Almeida
    Agência:0655 op:013 c/c 891746-2 Caixa Econômica
    * Nome -Edna Rodrigues
    Agência-1239-4 Conta-33787-0 (Conta Corrente ) Banco-Banco do Brasil
    * Nome -Marisa Alves da Silva
    Agência-0606 Conta-1011524-8 (Conta Poupança) Banco -Bradesco
    * Nome -Maria Carolina Rodrigues
    Agência-2113-0 Conta-0025212-3 (Conta Corrente) Banco-Bradesco
    * Nome -Claudemir Pereira Agência -0816 Operação 013 Conta-0068864-5 (Conta Poupança) Banco -Caixa Economica Federal
    * Nome –Luciano De Melo Amazonas
    Ag encia-0071 Conta-64663-2 (conta corrente)Banco Itaú/ http://www.itau.com.br/

    Responder

  18. Nicole 18/11/2011 16:45

    uma ajuda e tanto!

    Responder

  19. thiago 30/11/2011 09:56

    ola no meu css ñ pegou no IE 7 pq alguem me ajudar

    Responder

  20. Erick 05/01/2012 14:08

    Não funciona no box-shadow, se os valores forem negativos.
    Que pena.

    Mas já resolve varios problemas.

    Responder

  21. Angela Chiu 16/01/2012 16:56

    Por fovor,
    alguém sabe como pode fazer isso funcionar em joomla! também?

    Responder

    Eduardo Reply:

    Bom dia Angela!

    Coloque no css do template que vai ser usado! Na pasta css do template coloque o arquivo e edite o template.css com os dados necessários conforme descrito acima!

    Espero ter ajudado! Estou a disposição para novas dúvidas sobre Joomla.

    Abraço

  22. cats 19/03/2012 05:29

    I’d like to find out more? I’d want to find out more details.

    Responder

  23. cats 19/03/2012 08:34

    Can you please send me the code for this script or please tell me in detail concerning this script?

    Responder

  24. Noelle Heitbrink 17/04/2012 19:36

    the phone is fine but it does not support the arabic letters so I can’t read any arabic text in my phone and this is a big issue for me because arabic is my native language .

    Responder

  25. Thaise 06/05/2012 15:26

    Tive problema no IE ele não obedeceu o comando
    Coloquei o arquivo .htc fora da pasta do CSS.Ele está na raiz do site
    O meu código ficou assim:
    .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 */

    }

    Podem me ajudar por favor?

    Responder

  26. Thaise 06/05/2012 15:26

    Tive problema no IE ele não obedeceu o comando
    Coloquei o arquivo .htc fora da pasta do CSS.Ele está na raiz do site
    O meu código ficou assim:
    .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 */

    }

    Podem me ajudar por favor?

    Responder

  27. Renato Rafael 08/05/2012 15:57

    Olá, não consegui fazer funcionar no ie9. coloquei primeiro o htc ai dentro da pasta de css, não acontecia efeito nenhum, no IE as bordas continuavam quadradas. Depois coloquei na pasta raiz ai sumiu tudo de vez. Alguém pode me explicar melhor com usar isso?
    Meu codigo ficou assim:

    #banner-principal{
    width:977px;
    margin-left:13px;
    }
    #banner-principal .numeros{
    width:122px;
    height:23px;
    background-color:#034768;
    margin-top:10px;
    padding-left:12px;
    padding-top:5px;
    float:right;
    border-radius:15;
    -moz-border-radius:15;
    -webkit-border-radius:15;
    behavior:url(ie-css3.htc);
    }

    Responder

  28. Marcus Vinícius 09/05/2012 23:27

    Não deu certo comigo, será que alguem pode criar uma video aula no youtube?

    Responder

  29. Alexandre Broggio 05/07/2012 17:19

    Richard obrigado a grande dica foi colocar ele na pasta css, pois aqui não funcionava devio a isso, muito obrigado por compartilhar.

    Responder

  30. Wesley 13/07/2012 16:50

    Ótimo post!
    Só não concordo com o “…temido Internet Explorer”, a palavra é ODIADO mesmo.

    Responder

  31. Celso 14/07/2012 09:53

    Como só funcionou esse arquivo:

    behavior:url(border-radius.htc);

    Mas ele só deixa as bordas arredondadas. Com o arquivo behavior:url(ie-css3.htc) não funcionou.

    IE é um lixo.

    Responder

  32. zam 10/08/2012 22:44

    Se liguem no .htaccess referente ao caminho /css/htc

    o mesmo serve para este htc http://css3pie.com/

    funiona sim, Mas é chato de acertar.

    Responder

  33. alex 21/08/2012 17:42

    tem algums esquema pra eu conseguir alterar o tamnho de um backgroud-image e funcionar no IE com esse HTC?

    Responder

    alex Reply:

    desconsidera essa pergunta e responde a outra por favor…abs

  34. alex 21/08/2012 17:42

    será que tem algums esquema pra eu conseguir alterar o tamnho de um backgroud-image e funcionar no IE com esse HTC?

    Responder

  35. Magdo 19/09/2012 17:26

    Estou tendo problemas com um fundo gradiente que foi declarado no css… em todos os browsers roda, mas o abençoado (#@%&*) IE não reconhece.

    Alguém tem alguma solução/Sugestão?

    Abraço

    Responder

  36. christian 08/01/2013 14:37

    #borda{
    border-width: medium;
    border-style: solid;
    border-color: #000;
    border-radius:12px;
    width:800px;
    height:400px;
    margin-top:-330px;
    margin-left:171px;
    behavior: url(ie-css3.htc);

    o meu ficou assim n sei pq n ta pegano me ajudem

    Responder

    Nagy Reply:

    Christian, vc precisa colocar o arquivo “ie-css3.htc”, dentro da pasta onde a sua estrutura está!

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>