如何标准化Chrome和Firefox之间选择框的高度？

Question

查看Chrome和Firefox中的http://demo.neeraj.name/admin_data.在Firefox中,选择框具有较大的高度.在Chrome中,选择框的高度非常小.

如何让chrome和safari的选择框看起来像Firefox的选择下拉？

Answer 1

我之前遇到过这个问题

设置select元素的高度在Windows中的webkit上工作正常,但在Mac上的webkit上失败.

如果设置了css属性

-webkit-appearance: menulist-button;

它将允许高度在Mac上正常工作,但它会在窗口上创建这个奇怪的黑色边框.您可以通过设置css border属性来调整边框,但这会更改所有允许您设置选择边框样式的浏览器的外观,而不仅仅是webkit.

在这一点上,我放弃了,但希望如果你想进一步调查,这是一个很好的起点.

Answer 2

增加line-height.    

Answer 3

除非您还有背景设置,否则高度将无法在Safari上运行.如果设置背景,则可能会丢失Windows版本的Safari中的下拉箭头.形状造型似乎再次出现问题.

Answer 4

使用css border属性.使选择边框为无或0. border:none ; 在mac os中完美地展示了chrome和safari

Answer 5

@ Chi的回答是正确的.另一个快速黑客是添加边框CSS样式:

选择{border:1px solid #CCC}

这两者都会触发-webkit-appearance:menulist-button属性,并具有删除丑陋的黑色边框:)的额外好处.

Answer 6

示例页面适用于 Google Chrome 4 和 Safari 4