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

Question

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

下面的 select 元素和 div 应该看起来完全一样。选择以某种方式具有额外的水平和垂直填充。我错过了什么？谢谢。

浏览器测试(chrome 版本似乎很重要):

• Mozilla/5.0(Windows NT 6.1；WOW64)AppleWebKit/537.36(KHTML，如 Gecko)Chrome/36.0.1985.125 Safari/537.36
• Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36(KHTML，如 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 操作系统 7_0，如 Mac OS X)AppleWebKit/537.51.1(KHTML，如 Gecko)Version/7.0 Mobile/11A465 Safari/9537.53
• 是否可以修复从 537.36 到 537.51.1 的错误？

Answer 1

浏览器通常有自己的(略有不同)呈现方式 <select>元素，这会使仅使用 CSS 使它们完全按照所需显示变得令人沮丧。

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

select{
    line-height:1em;
}

这是一个 updated JSFiddle以表明这一点。如果你想要 <select>要在所有浏览器中以某种方式查看，您可能需要考虑使用 JavaScript 自己创建一个。 (当您这样做时，需要考虑一些注意事项。)

希望对您有所帮助!如果您有任何问题，请告诉我。