html - Chrome 53中的<select>高度

更新到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，但这没什么不同。

额外的功劳：他们在Chrome 53中究竟做了哪些更改以实现此更改？我没有在变更日志中清楚地列出它。

最佳答案

使用CSS，我发现仅通过添加标准font-family font-size并将border设置为0就能删除1个像素的差异。移除另一个像素要困难一些。我最终不得不将-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;，它将显示相同的内容。

关于html - Chrome 53中的<select>高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39419155/