CSS 如何标准化 Chrome 和 Firefox 之间选择框的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2547354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to standardize the height of a select box between Chrome and Firefox?
提问by Neeraj Singh
Check out http://demo.neeraj.name/admin_datain both Chrome and Firefox. In Firefox the select box has large height. In Chrome the height of select box is very small.
在 Chrome 和 Firefox 中查看http://demo.neeraj.name/admin_data。在 Firefox 中，选择框的高度很大。在 Chrome 中，选择框的高度非常小。
How do I make the select box of chrome and safari look like the select drop down of Firefox?
如何让 chrome 和 safari 的选择框看起来像 Firefox 的选择下拉框？
回答by Chi
I've run into this problem before
我以前遇到过这个问题
Setting the height of the select element works fine on webkit in Windows, but fails on webkit on a Mac.
设置 select 元素的高度在 Windows 上的 webkit 上工作正常，但在 Mac 上的 webkit 上失败。
If you set the css attribute
如果你设置了 css 属性
-webkit-appearance: menulist-button;
It will allow the height to work properly on a Mac, but it creates this weird black border on windows. You can adjust the border by setting the css border property, but that changes the look on all browsers that let you style select borders, not just webkit.
它将允许高度在 Mac 上正常工作，但它会在 Windows 上创建这个奇怪的黑色边框。您可以通过设置 css border 属性来调整边框，但这会改变所有浏览器上的外观，让您可以设置选择边框的样式，而不仅仅是 webkit。
At this point, i gave up, but hopefully that is a good starting point if you want to investigate further.
在这一点上，我放弃了，但如果你想进一步调查，希望这是一个很好的起点。
回答by Praveen Vijayan
Increase the line-height.
增加line-height.
回答by eggs
heightwill not work on Safari unless you also have a backgroundset. If you set a background you may lose the drop down arrows in the windows version of Safari. Again form styling seems to be wrought with issues.
除非您还设置了背景，否则高度将无法在 Safari 上使用。如果您设置了背景，您可能会丢失 Windows 版 Safari 中的下拉箭头。表单样式似乎再次出现问题。
回答by Praveen
use css border property. make the select border to none or 0. border:none; showing perfectly in chrome and safari in mac os
使用 css 边框属性。使选择边框为 none 或 0。border:none; 在 mac os 中在 chrome 和 safari 中完美显示
回答by Chris J
@Chi's answer is correct. Another quick hack is to add a border CSS style:
@Chi 的回答是正确的。另一个快速的 hack 是添加一个边框 CSS 样式：
select { border: 1px solid #CCC }
选择 { 边框：1px 实心 #CCC }
This both triggers the -webkit-appearance: menulist-button property with the added benefit of removing the ugly black border :).
这两者都会触发 -webkit-appearance: menulist-button 属性，并具有移除丑陋黑色边框的额外好处:)。
回答by markashworth
回答by markashworth
Use line-heightfor safari its working.
使用line-height进行 safari 的工作。
回答by estern
You can increase the font-size to help with the height as well. I think that Safari mac show up to 16px font-size. At least gets a larger click region.
您也可以增加字体大小以帮助提高高度。我认为 Safari mac 最多显示 16px 字体大小。至少获得了更大的点击区域。
回答by Fatih Hayrio?lu
Sample page works Google Chrome 4 and Safari 4
示例页面适用于 Google Chrome 4 和 Safari 4
回答by Tony Pye
Simply set the height property. line-height worked in Safari on Windows, but not on Mac. height worked on both.
只需设置高度属性。line-height 在 Windows 上的 Safari 中有效，但在 Mac 上无效。高度对两者都起作用。
