Chrome中的HTML选择元素幻像填充

Question

http://jsfiddle.net/7nudw/2/

下面的 select 元素和 div 看起来应该完全一样。不知何故，选择具有额外的水平和垂直填充。我错过了什么？谢谢。

浏览器测试（chrome 版本似乎很重要）：

• Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
• Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/34.0.1847.116 Chrome/34.0.1847.116 Safari/537.36

<select class="test"><option>option 1</option></select> <br/> <div class="test">option 1</div>

.test {
    display: inline-block;
    font-size: 30px;
    font-family: monospace;

    background-color: blue;
    border: 1px solid red;
    border-radius: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;

    padding-left: 0;

    margin-bottom: 1px;
}

编辑#1： http://jsfiddle.net/7nudw/5/ 添加行高仍然不起作用。

编辑#2： 适用于具有较新 chrome/webkit 构建的 Mac OS：

• Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
• 能否修复从 537.36 到 537.51.1 的错误？

Answer 1

浏览器通常有自己的（略有不同的）渲染<select>元素的方式，这会让人沮丧地只使用 CSS 来让它们完全按照需要显示。

在您的示例中，我认为 Chrome 的渲染方法是导致额外水平填充的原因。但是，可以通过确保<select> 中的line-height 正好是字体大小来移除垂直填充：

select{
    line-height:1em;
}

这里有一个updated JSFiddle 来证明这一点。如果您希望 <select> 在所有浏览器中以某种方式显示，您可能需要考虑使用 JavaScript 自己创建一个。 （这样做时需要考虑一些注意事项。）

希望这会有所帮助！如果您有任何问题，请告诉我。