IE9 css media query with select height

IE9 css media query with select height

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