:hover en IE6....

Publicado a las 12:34:56 en Programación (9)

Para los que nos dedicamos a hacer sitios web, a veces resulta un verdadero dolor de cabeza lograr que lo que diseñamos se vea de la misma forma en los diferentes navegadores que hay en el mercado.

Pero el navegador que más problemas trae para ello es el Internet Explorer 6. Su falta de compatibilidad con estándares resulta estresante por momentos, pero hasta que los usuarios finales no dejen de utilizarlo para navegar por internet, supongo que habrá que seguir encontrando soluciones para que se muestren bien las webs.

Uno de los problemas principales, por lo menos para mí, es que el IE 6 no reconoce la opción :hover en las hojas de estilo, para otras etiquetas que no sean <a>.

Esta opción de :hover, para los que no la conocen, permite que al hacer pasar el mouse sobre un enlace o campo, se le pueda aplicar cambios al estilo visual del mismo, como cambiar colores de fondo y de texto, hacer aparecer una imagen como fondo, etc. El IE 6 solamente permite hacer esto a los enlaces propiamente dichos, restringiendo considerablemente al momento de querer mostrar una web algo más interactiva.

Pues bien, buscando una solución para ello, logré encontrar la web de Peter Nederlof, en donde nos muestra una solución muy interesante para ello.

Esta solución consiste en agregar un archivo .htc a nuestro sitio web, haciendo que los :hover logren funcionar. Este archivo lo pueden descargar desde su sitio web.

Una vez que hayan descargado el archivo, deberán agregar la siguiente línea a su archivo de estilos:

body { behavior:url("csshover.htc"); }

Nota: Se debe indicar apropiadamente la ruta del archivo para que logre funcionar.

Una vez hecho esto, tendrán compatibilidad de los :hover en cualquier etiqueta en el navegador IE 6.

Lo bueno de este "fix", es que nos permite mantener nuestra web limpia de "hacks", con lo que podemos que nuestra web mantenga código estándar. Si desean mayor infomación, visiten el enlace del código.

Espero que les sea de utilidad.

Escrito por Phillipe en jueves, 13 de noviembre de 2008 | Comentarios (4)

Compartir: | | Más
  1. 1. Perdona, a ver, he puesto el archivo csshover.htc al lado del index y en la css lo llamo en el body con la ruta correcta, pero me sigue sin cargar las imagenes en el :hover y las imagenes normales las carga pero cada vez que paso por un elemento del menu las vuelve a cargar todas y asi todo el rato. Por favor necesito ayuda,
    Gracias.

  2. 2. Uhm... extraño. Sería conveniente poder revisar el código de tu página, para ver que se esté llamando correctamente al archivo. Si lo deseas, contáctame por el formulario de la página para revisarlo.

    Saludos.

  3. 3. Sabes, sí funciona pero el problema es que no puedes utilizar el archivo HTC haciendo referencia a él por medio de una url. Es decir, si quiero que lo cargue un múltiples sitios, tendría que estar agregando el archivito HTC a todos mis sitios y tampoco esa es la idea. ¿No existe alguna solución a eso? Es el mismo problema con los archivos .inc

  4. 4. Increíble lo que hiciste!!!!!!!!

    Gracias

  5. Nombre
    URL
    Email
    La dirección de Email no se publicará
    Recordarme
    Comentarios

    CAPTCHA Recargar
    Escribe los caracteres en la imagen de arriba