Home > Tutoriais, Web Design > Bugfix para imagens PNG no Internet Explorer

Bugfix para imagens PNG no Internet Explorer

Em 2006 publiquei um artigo que ensinava como colocar transparência em imagens PNG no Internet Explorer 6.

Há uns tempos atrás dei de caras com uma library em javascript que torna o IE mais de acordo com os standards nomeadamente no que se trata des CSS e transparência em imagens PNG.

Site do Script: http://dean.edwards.name/IE7/

Como instalar

Basta colocarem o seguinte código dentro das tags <HEAD></HEAD>

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Podem fazer download do ficheiro JavaScript aqui: http://code.google.com/p/ie7-js/downloads/list.

O ficheiro ZIP trás diversos ficheiros:

  • ie7-core.js – É um modulo fundamental. Contem um motor que permite que CSS funcione correctamente.
  • ie7-html4.js – Arranja tags HTML incorrectas.
  • ie7-layout.js – Permite o suporte do box-model do W3C e permite o suporte das propriedades CSS min-width, max-width e min-height.
  • ie7-css2-selectors.js – Permite usar selectores do CSS2.
  • ie7-graphics.js – Permite que o browser suporte transparencia PNG.
  • ie7-fixed.js – Permite o uso da propriedade Fixed no posicionamento de imagens.
  • ie7-standard-p.js – Um compacto de todos os scripts em cima, desta forma basta chamar apenas 1 script.
  • ie7-css3-selectors.js – Permite o suporte de selectores CSS3.
  • ie7-css-strict.js – Todos os selectores CSS são convertidos em classes do IE7.
  • ie7-overflow.js – Permite o uso de overflow:visible.
  • ie7-recalc.js – Permite o uso de document.recalc().
  • ie7-dynamic-attributes.js- Permite o suporte de selectores com atributos dinâmicos.
  • ie7-squish.js – Bug fixes.

Mais informações sobre os ficheiros em:
http://dean.edwards.name/IE7/usage/configure.html

Para que o script saiba quais os ficheiros em que deve actuar devem incluir -trans.png no nome das imagens.

Este script usa a propriedade filter que impede, no IE6, que se consiga posicionar ou repetir uma imagem de fundo PNG, a solução pode passar por criar um div que permite a inclusão da imagem como fundo.

Podem ler mais sobre este script em:
http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/

Site Oficial: IE7-JS

Loading
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.