重写select样式时关于select标签在div标签中的位置问题

在重写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;
  }

问题解决：