如何修復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控制此類行為。

下拉菜單本身呢？

如圖所示，激活時顯示選擇的東西。 據我所知，無法在任何瀏覽器中設置樣式。 甚至沒有粗體或斜體。 與樣式最接近的方法是使用來對它們進行分組。 這可能主要是用戶界面，但也可能是安全性。 您不希望人們使用字體做一些棘手的事情，從而使您不清楚選擇了哪個選項。

閱讀有關下拉菜單默認樣式的更多信息

在沒有任何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>

這是相同的。

Answer 2

bottom: 100%; 

將此屬性添加到您的CSS下拉菜單。 這迫使下面顯示所有內容。