DIVs emergentes - compatibilidad con IE8

[gmonterog]

Hola a todos:

He creado una página con algunos contenidos emergentes solo con CSS. Funciona muy bien y se ve muy vistoso con todos los navegadores modernos: Firefox, Chrome, IE9, Opera y Safari (al menos en versiones actualizadas).

El problema me ha surgido al probarlo en IE8, lo que por desgracia, significa todos los usuarios que aun tienen XP, que en el sector corporativo son muchos.

Os he preparado un ejemplo con el código lo más limpio posible al que podéis acceder en www.e-funciona.com/contenidos_emergentes

En principio he revisado las propiedades CSS empleadas y todas deberían ser compatibles con IE8, pero por algún motivo que no consigo averiguar, el comportamiento no es el esperado. De hecho no funciona.

No se si tiene que ver con los selectores empleados para activar :hover, con la superposición de capas (z-index, visibility, opacity) con el posicionamiento o con que. No consigo dar con ello.

Si alguien pudiera ayudarme a resolver este asunto le estaré muy agradecido. Caso contrario no me quedará más remedio que rediseñar el portal o al menos hacer un CSS especifico para IE8, y la verdad, no me gustaría.

Gracias a todos,

GMG

[IsaBelM]

las transiciones no funcionan en ie8-

[gmonterog]

Hola IsaBelM:

El tema no tiene nada que ver con las transiciones. Aunque IE no las soporta, sencillamente las ignora. La transición solo afecta al modo en que se realiza un cambio de valor de una propiedad, pero no determina que ese cambio se lleve a cabo o no. No lo bloquean, si el navegador no soporta transiciones, el efecto se produce de forma brusca, pero se produce. En cualquier caso y por si las moscas, ya probé en su momento a anular esas líneas del CSS, pero como ya te he dicho, no tiene nada que ver.

Sigo indagando. Creo que el tema está relacionado en como interpreta IE8 el hecho de tener 3 divs superpuestos, las propiedades visibility y opacity y la pseudoclase :hover, pero la verdad es que no estoy seguro.

Si saco algo en claro lo explicaré aquí mismo. Estoy sudadando tinta con el tema.

Gracias de todos modos.

Un saludo,

GMG.

Iniciado por IsaBelM

las transiciones no funcionan en ie8-

[IsaBelM]

pensé que era el efecto de transición. si te fijas en el código fuente se ve esto

#evaluacionPotencialDirectivo:hover + #overlayEvaluacionPotencialDirectivo

mientras que en la herramienta de desarrollo aparece esto otro

#evaluacionPotencialDirectivo + .ie7_class4#overlayEvaluacionPotencialDirectivo

de ahí que no funcione

[gmonterog]

Pues lo volveré a mirar. Ojalá tengas razón.

Aprovecho para pedirte información acerca de que es la herramienta de desarrollo. Soy bastante (muy) novato y hay muchos temas que desconozco.

Gracias otra vez.

Un saludo.

GMG.

Iniciado por IsaBelM

pensé que era el efecto de transición. si te fijas en el código fuente se ve esto

mientras que en la herramienta de desarrollo aparece esto otro

de ahí que no funcione

[IsaBelM]

en chrome o ie pulsa f12 para abrirla. en ie, cuando esté abierta pulsa la etiqueta css

[gmonterog]

Gracias. Estuve mirando un poco el tema este de las herramientas de desarrollo y no esta mal. A ver si saco tiempo para verlo un poco mas a fondo.

Un saludo.

GMG.

Iniciado por IsaBelM

en chrome o ie pulsa f12 para abrirla. en ie, cuando esté abierta pulsa la etiqueta css

[gmonterog]

Hola a todos otra vez:

Básicamente el problema es que tenía enlazado el script ie7-js, que en teoría sirve para corregir algunos problemas de compatibilidad con IE.

En la versión original de mi web lo he desactivado y ya funciona en IE8 (no se anteriores, pero esto ya me parece residual).

Comentar que finalmente he optado por trabajar con la propiedad opacity (y su correspondiente filtro para IE) y no con visibility o display. Esto se debe a que es la única que parece admitir transiciones (que como ya sabemos no funcionan en IE8, pero si en el resto de navegadores importantes).

Conclusión: no había problema de transiciones, no había problema de selectores pero, ojo a la hora de enlazar scripts de terceros, sobre todo para los que no sabemos como funcionan realmente. Puede que el resultado sea diferente al esperado o que, como en este caso, tenga efectos colaterales.

Por último, gracias al foro y en especial a IsaBelM (también a djaevi y emprear que participaron en este mismo hilo pero en el foro de html) por dedicar su tiempo a los que menos sabemos. Todos me dieron alguna información útil.

Saludos,

GMG.