CSS: background, eliminar parpedeos en IE6
Domingo, 25 de Junio de 2006Si alguna vez has utilizado imágenes como fondo de elementos con CSS, te habrás fijado que en Internet Explorer 6.0, cuando pasas por encima el cursor del ratón, se produce un molesto parpadeo o “flick”.
Es decir, con tener un código CSS y HTML simplemente como éste:
.mifondo {
background: url('img/cuadradito.gif') no-repeat;
}
<div class="mifondo">Aqui aparece un cuadradito de fondo</div>
En IE6 para Windows no se va a ver bien al pasar por encima el ratón.
Es un error conocido, y en esta página te explican como reproducir el error y la solución de cada uno (para poder ver los ejemplos de la página hay que utilizar IE6 claro):
De todas formas, y tras probar varias soluciones, la que he utilizado y que recomiendo, es la siguiente:
Solo tienes que subir al directorio en tu servidor Web donde están las imágenes que vas a utilizar como fondo en tus CSS un fichero .htaccess con el siguiente contenido:
ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000
Esta solución esta completamente explicada en:
El resto de soluciones son más laboriosas y algunas no son 100% efectivas. De todas formas sigue siendo muy recomendable leer el artículo para ver los diferentes bugs que tiene el IE6 con los background en CSS.
Marzo 12th, 2007 12:43 pm
if(window.ActiveXObject && !window.XMLHttpRequest) document.execCommand(”BackgroundImageCache”, false, true);