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

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

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

1> Chi..：

---

我之前遇到过这个问题

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

如果设置了css属性

-webkit-appearance: menulist-button;

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

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

---

这应该是正确的答案.

---

这对我不起作用.`-webkit-appearance:none`有效,但是在Chrome上它不显示下拉列表中的文本(对于选项和所选选项).

2> Praveen Vija..：

---

增加line-height.    

---

这已停止在Mac Chrome 30.0.1599.69中运行

3> eggs..：

---

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

---

设置'background:none'似乎足以让Chrome和Safari尊重OSX上选择框的高度属性.但看起来仍然像黑客.jQuery组合框解决方案可能是长期更好的.

4> 小智..：

---

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

5> Chris J..：

---

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

选择{border:1px solid #CCC}

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