javascript - HTML 选择框显示在 Chrome 中的 Windows 任务栏下方

Question

我正在尝试使用 select 标签添加一个 html 下拉列表，不幸的是，在 chrome 中我无法选择选项 5 和 6，因为它们显示在 chrome 的任务栏下方。如果我添加一个选项 7 然后列表突然显示在上面而不是下面。

这个列表总是会改变大小，所以不幸的是将列表放在更高的位置不是一个选项，因为总是有 2 个选项被隐藏的可能性。此外，列表中显示的元素数是在添加滚动条之前是特定于浏览器的。参见 Height of an HTML select box (dropdown)

到目前为止我尝试了什么:

• 当有超过 4 个选项时，尝试使用 jquery 和设置列表大小将下拉列表转换为静态列表。然而，这非常丑陋。
• 尝试使用 bootstraps .dropup 类，但不幸的是，这仅适用于列表项而不适用于选择选项
• 不同的 css hack，但如前所述，列表大小是特定于浏览器的。

我宁愿不添加任何外部库并找到某种简单的 Jquery hack 来解决这个问题。您还可以通过访问此 jsfiddle 链接并将显示窗口拖到屏幕底部来了解我的意思:

  <div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
     <option>6</option>
  </select>
</div>

https://jsfiddle.net/v9t4rm16/

Answer 1

看起来像this is an official chrome bug它影响 Chrome 版本 30-61

我认为没有官方解决方法。

如果您不想等待 chrome 修复，那么您可以尝试:

• 在页面底部添加白色，以便选择有空间展开
• 在选择本身中添加额外选项以强制 chrome 向上呈现