css - 如何在 IE 中修复下拉列表的样式？

Question

我有这个下拉列表，但问题是当我在 IE 中运行它时，如果我从底部或中间选择一些东西，它会上下移动。如何修复以便它总是在下面展开: https://jsfiddle.net/tq1bhfno/ (需要在IE中运行)

<div class="col-lg-2 col-md-2">

    <div class="select-wrapper">
        <select name="gametype" id="gametype" ng-model="selectGameType">
          <option>TEST1</option>
          <option>TEST2</option>
          <option>TEST3</option> 
          <option>TEST4</option>
          <option>TEST5</option>
          <option>TEST6</option>
          <option>TEST7</option>


        </select>
    </div>
</div>

Answer 1

下拉菜单由浏览器/操作系统呈现。您无法使用 CSS 或 JavaScript 控制此类行为。

下拉菜单本身呢？

例如，激活时显示选项的东西。据我所知，没有办法在任何浏览器中设置这些样式。甚至不是粗体或斜体。您可以获得的最接近样式的方法是使用 .这可能主要是一个 UI 问题，但也可能是一个安全问题。您不希望人们使用字体做一些棘手的事情，以至于不清楚选择了什么选项。

Read More About Dropdown Default Styling

查看没有任何 CSS 的行为:

https://jsfiddle.net/tq1bhfno/2/

只有 HTML:

<div class="col-lg-2 col-md-2">

<div class="select-wrapper">
    <select name="gametype" id="gametype" ng-model="selectGameType">
      <option>TEST1</option>
      <option>TEST2</option>
      <option>TEST3</option> 
      <option>TEST4</option>
      <option>TEST5</option>
      <option>TEST6</option>
      <option>TEST7</option>
    </select>
</div>

是一样的