在重寫select標籤樣式時，遇到了一個瀏覽器相容的問題，其只有谷歌出現了該問題。問題描述如下：用div重寫select樣式程式碼如下：

//div標籤樣式

.div-select{
  position:absolute;
  border:3px solid #000;
  top:78px;
  }

//將select樣式清除

.none-select{
  border:none;
  outline: none;
  width: 100%;
  height: 100%;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding-left:10px;
  background: url("pulldown.png") no-repeat scroll right center transparent;
  }

//html程式碼

 <div class="div-select" style="left:54px;width:111px;height:19px">
  <select class="none-select">
  <option value="2017">2017年度</option>
  <option value="2018">2018年度</option>
  <option value="2019">2019年度</option>
  <option value="2020">2020年度</option>
  </select>
  </div>

在谷歌中出現了select填充到div中時上方有個空白處，如下圖：

一開始以為是select的邊界，但是設定為0也沒有用，再經分析應該是select在div中位置有問題，於是在select樣式中加入下面語句：

  .none-select{
  border:none;
  outline: none;
  width: 100%;
  height: 100%;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding-left:10px;
  vertical-align:top;
  background: url("pulldown.png") no-repeat scroll right center transparent;
  }

問題解決：