2011-07-08 16 views
12

Tengo un menú desplegable de CSS simple con un iframe dentro. Cuando cierro el mouse sobre el menú desplegable, el menú se despliega. Pero cuando mi mouse sitúa el iframe dentro del menú, el menú vuelve. Aquí hay una versión simplificada de mi código:: el control deslizante no funciona correctamente en IE9

<div id="comments"> 
    <a href="#" class="btn">View comments</a> 
    <div id="comment-wrap"> 
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe> 
    </div> 
</div> 

<style type="text/css"> 
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;} 
#comments:hover #comment-wrap{display:block;} 
</style> 

Esto funciona en las últimas versiones de FF, Chrome y Opera.

P.S. El menú desplegable permanece desplegado cuando mi mouse se mueve sobre el relleno de # comment-wrap.

+0

¿Qué tipo de documento usas para eso? –

Respuesta

1

Desafortunadamente, esto parece ser un error del navegador, que se remonta muchas versiones de IE. Puede usar una solución JS como respaldo para IE. Creé un jsFiddle example, adaptando código de another solution para resolver este problema.

Espero que ayude!

Editar: más pruebas en IE9 muestra que aunque se muestra el marco flotante, flotando sobre las barras de desplazamiento se oculta inmediatamente. Es probable que haya una solución JS más complicada para esto, pero depende de usted si desea implementarla.

17

me he enfrentado a problemas similares mientras se trabaja con la clase: hover pseudo. Empezó a funcionar bien cuando cambié el modo de documento del navegador a IE 9 y el modo de navegador también se configuró en IE9. IE 9 tiene el modo de documento configurado en IE8 de manera predeterminada.

Además, se puede añadir la siguiente información de metadatos en la etiqueta de la cabeza:

<meta http-equiv="X-UA-Compatible" content="IE=9"/> 

Espero que esto ayude.

+0

Hola Vilas, ¿puedes explicar/cómo/configurar el modo documento/navegador? Supongo que el modo de documento es una configuración que el autor de la página establece en algún lugar de la marca, pero el modo de navegador es una configuración que posee el usuario. –

+0

Sí me refiero al modo de navegador, además, se puede añadir la siguiente información de metadatos en la etiqueta de la cabeza

+0

wow ¿Cómo fue que la etiqueta meta ¿trabajo? ¡solucionó mi problema por completo! – christopher

0

Recientemente he tenido un problema en el vuelo estacionario IE10 (no estoy seguro acerca de las versiones inferiores) que me estaba volviendo loco. Tenía mi css hover establecido correctamente y era para un div que contenía un iframe. El problema era que cuando colocabas el div, mostraba el iframe, pero tan pronto como intentaste mover el mouse hacia el iframe, desaparecía de nuevo. Busqué en todas partes y no encontré nada para una respuesta aceptable para mí excepto para usar javascript o jquery. Después de días de tratar de resolverlo, encontré una solución muy simple que funcionó para mí. Yo simplemente eliminado el marco flotante del div y utilizamos el objeto como

<div class='showme'>links<div style='float:left;' class='showme_1'> 
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'> 
    </object> 
</div> 

espero que esto ayuda a la gente a ahorrar mucho tiempo de investigación.

4

Me encontró que tenía el mismo problema y sé que esto ya es una entrada antigua, pero me sentí como si tuviera que publicar mi solución. Básicamente, IE no acepta el evento :hover para ninguna etiqueta que no sea <a> con href especificado (no funcionará en versiones anteriores, es decir, a menos que agregue <!DOCTYPE HTML> en la parte superior. ¡Y eso fue todo! Problema resuelto :).

+4

Me encanta cuando recibo un voto sin explicación alguna: P. Fácil de votar, difícil de justificar? Nos ayudaría a mí y a quien llegue a SO y busque una respuesta para esta pregunta, para saber por qué se otorgan los votos (arriba o abajo). Compartí mi experiencia para ayudar y agregar una opción diferente. A menudo descubrí que la respuesta más votada no es la que funciona para mí. No es un problema personal, solo trata de ser constructivo. –

Cuestiones relacionadas