IE9 css media query with select height

Question

We have a CSS media query that we are using to set styles for mobile devices. In that media query we increase the height of select elements so they're easier to hit. Something like this:

@media only screen and (max-width: 599px) {
    .mySelect {
        height: 40px;
    }
}

If you make the browser window smaller, you can see the select get bigger and then it shrinks again when you make the browser bigger. This works great in Chrome and Firefox, but (of course) not in IE9. When the select shrinks back down, the text is cut off. See this fiddle: http://jsfiddle.net/7cVbx/. Also, below are screenshots showing what happens:

At the beginning:

After making the window smaller:

After making the window wide again:

I found that if set the height of select elements outside of the media query, it works (the commented out part of the fiddle). However, I'm very wary of setting the height in the default case, as different browsers will end up with too much white space in the dropdown or it cut off part of the text.

Is there a better way to do this? Or is explicitly setting the height outside the media query the only way to make this work for IE9?

NOTE: Changing the Browser Mode in IE10 does not reproduce this. It only happens in the actual IE9 browser.

Answer 1

After playing around with it a bunch more, I found the solution. Instead of setting the non-media query class to have some arbitrary height, I just set it to 100%.

.mySelect
{
    height: 100%;
}

As far as I can tell, this doesn't effect the select at all, and IE9 renders it correctly when widening the window back. Updated fiddle: http://jsfiddle.net/7cVbx/1/