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

【问题标题】：IE9 css media query with select height具有选择高度的 IE9 css 媒体查询
【发布时间】：2013-09-10 19:00:11
【问题描述】：

我们有一个 CSS 媒体查询，用于设置移动设备的样式。在那个媒体查询中，我们增加了选择元素的高度，这样它们更容易被点击。像这样的：

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

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

开头：

缩小窗口后：

再次使窗口变宽后：

我发现如果在媒体查询之外设置选择元素的高度，它可以工作（小提琴的注释部分）。但是，我对在默认情况下设置高度非常谨慎，因为不同的浏览器最终会在下拉菜单中出现过多的空白或截断部分文本。

有没有更好的方法来做到这一点？或者是在媒体查询之外显式设置高度是使其适用于 IE9 的唯一方法？

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

【问题讨论】：

【解决方案1】：

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

.mySelect
{
    height: 100%;
}

据我所知，这根本不会影响选择，并且 IE9 在向后加宽窗口时会正确呈现它。更新小提琴：http://jsfiddle.net/7cVbx/1/

【讨论】：