html - Chrome 53 中的 <select> 高度

Question

更新到 Chrome 53.0.2785.101 后，我注意到 <select> 的高度元素现在比以前少了一个像素。

下面的代码将在 Chrome 中显示高度为 17，在 Firefox 中显示为 19。

document.write("height: "+$("#myselect").height())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option>Just one</option>
</select>

我可以添加填充来补偿，但这会改变其他浏览器中的外观。除了实现特定于 Chrome 的 CSS 之外，是否有一些方法可以规范化 <select> 的高度元素在浏览器中具有一致的外观？我尝试了标准的 reset.css，但这并没有什么不同。

Extra credit:他们在 Chrome 53 中究竟做了什么改变来实现这一变化？我没有在变更日志中清楚地看到它。

Answer 1

玩弄 CSS 我发现只需添加标准 font-family font-size 并设置 border 到 0。移除另一个像素有点困难。我最终不得不将 -webkit-appearance 和 -moz-appearance 设置为 none，然后应用 min-height。这是代码示例:

#myselect {
  background: lightblue;
  font-size: 12px;
  font-family: verdana;
  border:0;
  -webkit-appearance : none;
  -moz-appearance : none;
  min-height: 20px;
}

我updated your js.fiddle如果你想测试结果。顺便说一句，我必须将 border 设置为 0 的原因是因为我已将 JS 更改为 outerHeight。如果将其设置为 height 并删除 border: 0;，它会显示相同的值。