3 comentarios » Publicado el: 02 de Marzo de 2009 a las 10:52:00, en la categoría: Web.
Existen dos tipos de problemas con los archivos PNG en Internet Explorer 6:
En ambos casos, es necesario aplicar algún fix para IE6. Hablo de "en ambos casos" porque cada uno de ellos se debe tratar de manera independiente.
Acá están las soluciones para ambos casos.
Como vimos en otro post, lo primero que se debe hacer es incluir los archivos necesarios para Internet Explorer 6. Para esto, dentro de la etiqueta head hay que escribir el siguiente código:
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/ie6.js"></script>
<![endif]-->
Con estas lineas de código, detectamos si el navegador es IE6. En ese caso, le decimos que cargue los archivos ie6.css e ie6.js.
Para las imágenes del tipo png, se carga el archivo ie6.js. Este archivo contiene solamente una función que sirve para corregir los PNG. El siguiente es el código:
/* FIX PARA EXPLORER 6 *******************/
function PNG_loader() {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle += "float:left;";
if (img.align == "right") imgStyle += "float:right;";
if (img.parentElement.href) imgStyle += "cursor:hand;";
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i--;
}
}
}
window.addEvent('domready', PNG_loader);
/*****************************************/
La gracia es que basta con cargar este archivo y se corrigen de inmediato todas las imágenes PNG que han sido incrustadas en la página.
El archivo ie6.css se usa para corregir los divs que tienen un PNG como background.
Para cada DIV que contenga un background con PNG se debe escribir el siguiente código:
#fondo_png{
background-image: none !important;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/nombre_del_archivo.png);
}
Lo único que hay que hacer es reemplazar la ruta del background donde dice "src=" por la ruta ABSOLUTA de la imágen.
Lo que si se debe tener en consideración es que #fondo_png{ background: url(img/nombre_del_archivo.png); } debe estar definido en nuestro archivo principal de CSS. El archivo ie6.css es un archivo adicional, que SOBREESCRIBE esa parte del estilo.
Utilizando estos dos métodos es posible corregir todos los PNGs en nuestros sitios web.
Existen otros métodos. Algunos más fáciles, otros más complejos, pero estos son los que he usado yo por mucho tiempo, y puedo ASEGURARLES que funcionan en el 100% de los casos.
Los comentarios han sido cerrados.
Sin embargo, desde ahora podrás comentar en la nueva dirección de esta entrada: http://www.sebastianbarria.com/web/pngs-transparentes-en-ie6/
RSS | XHTML | CSS | Licencia CC (BY-NC-SA)
© peivem 2008. Todos los derechos reservados | Versión 1.62 | Diseño y desarrollo por GEEKBOX