Hace ciertos días me encomendaron realizar una página web para lo cual decidí realizar algunos menus utilizando CSS inicie probando en FireFox y todo muy bien, de repente me toco presentar los avances del proyecto y sorpresa totalmente des configurado lo cual me causo sorpresa ¿Cual era el problema?, si , lo estaba abriendo en IExplorer, como hice para que funcionara:
1. Agregue un par de scripts a la pagina maestra estos en una condición que únicamente es legible para IE de modo que únicamente se cargan cuando se trata de este explorador y son los siguientes:
En esta dirección hay una pequeña descripción de como utilizarlos y las respectivas direcciones para descargarlos. no se miran perfectamente igual, pero al menos indica que le tenes alguna consideración a los usuarios IE.
http://vagabundia.blogspot.com/2009/05/ie8js-resolviendo-incompatibilidades-de.html
2. En este punto andaba todo muy bien, e inclusive salió a producción, de repente me llaman para soporte técnico y sorpresa me muestran que el menú aparecía atrás de un componente de galería fotográfica, en este momento deduje que definitivamente era el explorador y gracias a un mensaje que indicaba colocar el explorador en modo normal ( no compatibilidad) con IE7 (era IE8) lo presione y todo bien, esto fue una solución para mientras (no para mientras abandonara el proyecto) encontraba la solucion definitiva, esta fue con apoyo de la siguiente pagina
http://stackoverflow.com/questions/10581160/css-dropdown-menu-hidden-behind-content-ie7
En general IE7 e IE6 no reconoce una instrucción z-index si no es antecedida por una instrucción position, de modo que algo como esto
Es interpretado por IE7 como que z-index: 0;
por lo que se debe agregar position:relative; para forzar a IE7 a reconocer la instruccion
En general esos pasos seguí y me ha funcionado bien, cual quier punto que se me hubiese olvidado pueden comentar.
1. Agregue un par de scripts a la pagina maestra estos en una condición que únicamente es legible para IE de modo que únicamente se cargan cuando se trata de este explorador y son los siguientes:
En esta dirección hay una pequeña descripción de como utilizarlos y las respectivas direcciones para descargarlos. no se miran perfectamente igual, pero al menos indica que le tenes alguna consideración a los usuarios IE.
http://vagabundia.blogspot.com/2009/05/ie8js-resolviendo-incompatibilidades-de.html
2. En este punto andaba todo muy bien, e inclusive salió a producción, de repente me llaman para soporte técnico y sorpresa me muestran que el menú aparecía atrás de un componente de galería fotográfica, en este momento deduje que definitivamente era el explorador y gracias a un mensaje que indicaba colocar el explorador en modo normal ( no compatibilidad) con IE7 (era IE8) lo presione y todo bien, esto fue una solución para mientras (no para mientras abandonara el proyecto) encontraba la solucion definitiva, esta fue con apoyo de la siguiente pagina
http://stackoverflow.com/questions/10581160/css-dropdown-menu-hidden-behind-content-ie7
En general IE7 e IE6 no reconoce una instrucción z-index si no es antecedida por una instrucción position, de modo que algo como esto
{
z-index: 100;
}Es interpretado por IE7 como que z-index: 0;
por lo que se debe agregar position:relative; para forzar a IE7 a reconocer la instruccion
{
display: block;
position: relative;
z-index: 1; // force IE to recognize stack at this point
}En general esos pasos seguí y me ha funcionado bien, cual quier punto que se me hubiese olvidado pueden comentar.
Comentarios