具有选择高度的IE9 css媒体查询

Question

我们正在使用CSS媒体查询来设置移动设备的样式。在该媒体查询中，我们增加了选择元素的高度，因此它们更容易被击中。像这样：

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

如果您使浏览器窗口变小，您可以看到选择变大，然后当您使浏览器变大时它会再次缩小。这在Chrome和Firefox中效果很好，但（当然）不适用于IE9。当select缩小时，文本被切断。看到这个小提琴：http://jsfiddle.net/7cVbx/。另外，下面是显示发生情况的屏幕截图：

开头：

使窗口缩小后：

再次使窗口变宽：

我发现如果设置媒体查询之外的选择元素的高度，它就可以工作（小提琴的注释部分）。但是，我非常担心在默认情况下设置高度，因为不同的浏览器最终会在下拉列表中留下太多的空白区域，或者它会切断部分文本。

有更好的方法吗？或者明确地设置媒体查询之外的高度是使其适用于IE9的唯一方法吗？

注意：在IE10中更改浏览器模式不会重现此操作。它只发生在实际的IE9浏览器中。

Answer 1

在玩了一堆之后，我找到了解决方案。我没有将非媒体查询类设置为任意高度，而是将其设置为100％。

.mySelect
{
    height: 100%;
}

据我所知，这根本不会影响选择，IE9在向后扩展窗口时会正确渲染它。更新了小提琴：http://jsfiddle.net/7cVbx/1/