Question

更新到Chrome 53.0.2785.101后，我注意到＆lt; select＆gt;的高度元素现在比以前少了一个像素。以下代码将在Chrome中显示17的高度，在Firefox中显示19的高度。＆＃13; ＆＃13; document.write（＆＃34; height：＆＃34; + $（＆＃34;＃myselect＆＃34;）。height（））＆＃13; ＆lt; script src =＆＃34; https：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"＆gt;＆lt; / script＆gt;＆＃13; ＆lt; select id =＆＃34; myselect＆＃34;＆gt;＆＃13; ＆lt; option＆gt;只需一个＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆＃13; 我可以添加填充来补偿，但随后会改变其他浏览器的外观。除了实现特定于Chrome的CSS之外，还有一些方法可以规范化＆lt; select＆gt;的高度。元素在浏览器中具有一致的外观？我试过一个标准的reset.css，但这并没有什么不同。额外的功劳：他们在Chrome 53中究竟改变了什么来实现这一变化？我没有在changelog中清楚地看到它。

Answer 1

使用CSS我发现只需添加标准font-family font-size并将border设置为0，即可删除1个不同的像素。删除其他像素有点困难。我最终必须将-webkit-appearance和-moz-appearance设置为无，然后应用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如果您想测试结果。 BTW之所以我必须将border设置为0是因为我已将JS更改为outerHeight。如果您将其设置为height并删除border: 0;，则会显示相同的内容。

Answer 2

我尝试使用给定的CSS并遇到某些显示问题。在表单中，如果有按钮，选择，输入等，则将css置于选择状态与按钮，输入（高度不匹配）之类的其他组件配合不佳。

我只是放在CSS下方，而我在chrome和FF中得到的外观都非常好。所以想在这里分享。

select 
{
    min-height: 27px;
}

您可以根据需要更改最小高度。

Chrome中的<select>高度53

2 个答案: