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

Question

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

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

浏览器tesed（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：编辑＃2： 适用于Mac OS，使用更新的chrome / webkit构建：

• Mozilla / 5.0（iPad; CPU OS 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自己创建一个。 （当你这样做时，需要考虑一些注意事项。）

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