css - :hover is not working properly in IE9 -



css - :hover is not working properly in IE9 -

i have simple css dropdown menu iframe within it. when hover mouse on dropdown menu, menu drops down. when mouse hovers iframe within menu, menu goes back. here's simplified version of code:

<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>

this works in latest versions of ff, chrome, , opera.

p.s. dropdown menu remain dropped downwards when mouse hovering padding of #comment-wrap.

i have faced similar problems while working :hover psuedo class. started working fine when changed document mode of browser ie 9 , browser mode set ie9. ie 9 has document mode set ie8 default.

additionally, can add together next meta info in head tag:

<meta http-equiv="x-ua-compatible" content="ie=9"/>

hope helps.

css internet-explorer iframe hover

Comments

Popular posts from this blog

iphone - Dismissing a UIAlertView -

intellij idea - Update external libraries with intelij and java -

javascript - send data from a new window to previous window in php -