0

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

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

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

开头：在此处输入图像描述

缩小窗口后：在此处输入图像描述

再次使窗口变宽后：在此处输入图像描述

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

有一个更好的方法吗？或者明确设置媒体查询之外的高度是使 IE9 工作的唯一方法？

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

4

1 回答 1

0

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

.mySelect
{
    height: 100%;
}

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

于 2013-09-10T21:37:04.067 回答