奇怪的行为 IE8 选择框向上显示并超出浏览器限制

Question

在 IE8 中，仅包含大约 50 个选项的简单选择就会溢出到浏览器窗口之外

是否有已知的解决方法？

如果是这样，有人有例子吗？

谢谢， Ernie

在 IE8 中尝试此代码

<select name="test" size=1>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
  <option value="x">X</option>
</select>

1. 调整浏览器大小，使其小于列表。
2. 单击选择控件，然后看到它从浏览器窗口中弹出。

Answer 1

我已经复制了您报告的问题。我在打开兼容模式的 IE7、IE8 和 IE8 中运行它，所有三个浏览器实例都显示了相同的问题。 溢出超出了浏览器的框架。

然而，这可能是按照设计的。如果溢出包含在浏览器内，则用户将不得不滚动浏览选项以进行选择，并且如果他们想要的选项超出了浏览器窗口的高度，则他们将不得不使用浏览器上的水平滚动条进行滚动向下完成查看 框中的其余选项。

你提到它在 IE7 中不会发生，但在我的测试中却发生了。我还没有在 FF、Chrome、Safari 或 Opera 中尝试过这个，但我假设如果所有现代浏览器都共享这个“故障”，那么这不是一个设计缺陷，而是故意的，让搜索变得很大 <在尚未最大化以适合整个屏幕宽度的浏览器窗口中查看网页时，“选择>”框更容易。

当用户可以只使用一个滚动条时，为什么要让他们使用两个滚动条呢？我同意这看起来有点傻，但我相信它背后有一些逻辑。

希望这会有所帮助。

编辑：

只是添加。这可能是有意为之的另一个原因是溢出是否隐藏在整个页面上。请参阅第二个屏幕截图：

如您所见，我添加了以下 css：

 <style type="text/css">
 /* <![CDATA[ */
 html {
 overflow: hidden;
 }
 /* ]]> */
 </style>

它消除了浏览器的本机水平滚动条。如果框没有溢出到浏览器窗口的框架之外，用户可能无法查看所有选项。

简而言之，我认为没有解决方法。这不是 CSS 问题，而是浏览器中对本机功能的控制限制。就像您无法强制用户是否在新选项卡或新窗口中打开链接一样，您也无法强制选择框保留在浏览器的框架内。有些事情是我们无法控制的。

问候，