IE8 and IE9 select boxes closes themselves when hovering

I got this weird problem as in topic: in IE (i'm testing version 8, got no way to test older/newer versions) and only in IE all the select boxes on my website started to close themselves as soon as i hover my mouse to select an option. This isn't happening on Firefox, and this isn't happening on my local开发者_Python百科 server, only on the test remote server (yes, the two sites are identical). So, to recap it: Local version: all fine, even in IE. Remote version: IE's select boxes "crash" as soon as i hover on them. Any ideas?

I had this problem in IE8 only and here's how I solved it:

In my CSS I was applying a font-family to the SELECT. Instead I applied it to the SELECT OPTION.

So instead of this:

select {font-family:'Avenir LT W01 85 Heavy';}

I did this:

select option {font-family:'Avenir LT W01 85 Heavy';}

And the menu stopped closing erratically. Hope this helps someone.

I found that the problem was in adding quotes in the name of the font-family. So, instead of writing

select{font-family:"Open sans";}

i've declared

select{font-family: open sans;}

I was having the same issue. In my case it was totally unrelated to Javascript, contrary to what your link implies. Turned out to be simple CSS.

Eventually I discovered that applying a color attribute to my select inputs' CSS with anything other than black would render them unusable. It didn't matter if the value was in hex or rgb, as long as it was black.

I put a conditional comment to target IE 7 or 8 (even though 7 was fine, I need it for IE 8 in compatibility mode), and set up this style declaration:

.myclass select {
   color: #000;
}

I've got the same problem and the solution is following:

select         { font-family:inherit; font-size:inherit; }

and the parent of select has necessary font option.

Thank for this answer this question

It looks like it might be a few different CSS declarations that can cause this.

I was having the same problem but no color declaration. It turns out that it was a font-family rule. I used a conditional comment to target IE8 and older and set the font-family to "inherit." Padding works fine, as does font-size.

I spent a whole day investigating this issue but in IE9. I'm sharing my solution since it wasn't because of the color or font-family of the select.

It turns out that IE freaks out when it finds an option inside a select that has a specified CSS value for opacity. The issue happens even if the opacity is overridden by another CSS rule with opacity: none or opacity: 1, the property shouldn't even appear.

It's a creepy browser bug.

I've had this issue in IE9 also. It was due to @font-face statements where you have the font-family property equal to the real font-family name. In IE11 it works fine.

That saved me:

$('select').css('background-color','red')

PS. Need to reset background color even if it's already set in css file.