在 Firefox 中选择框的文本异常大答案

【问题标题】：Select box's text strangely large in Firefox在 Firefox 中选择框的文本异常大
【发布时间】：2015-11-13 08:00:46
【问题描述】：

在 Safari、Chrome 和 Opera 中，大小为 20px 的 <select> 框如下所示：

但在 Firefox 中，它看起来像这样：

有谁知道为什么会发生这种情况或如何解决？谢谢！

编辑：Here's 一个小提琴，所以你可以自己测试它。

EDIT2：这似乎是 Mac OS X 的问题，因为使用 Windows 的人没有看到它。

【问题讨论】：

在 Chrome、IE11 和 Firefox 上看起来完全一样。也许尝试在 FF 上按 CTRL-0。
尝试设置-moz-appearance:none;这会重置默认浏览器样式，因为每个浏览器都会为某些元素提供自己的样式。
我猜你在 OSX 上，@Michael_B 正在使用 Windows。（仅使用 safari 和 IE11 浏览器来确定）。我也在 OSX 上，这发生在我身上，Firefox 的文本异常大
@AntonioSmoljan：我刚才试过了，它使选择框看起来像这样：i.imgur.com/0BswkLA.png
@Madivad：所以这是 OS X 的问题。很有趣。

标签： css firefox

【解决方案1】：

我建议使用em，它会在所有浏览器中为您提供更多标准。 20px = 1.25em

【讨论】：

【解决方案2】：

您可以使用these lines 关闭 webkit 和 Firefox 中选择框的默认样式：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

但是，这是一种挑剔且非标准的解决方案。字体大小会改变，但你也会失去所有其他的东西，包括箭头。

众所周知，选择框很难设置样式。有一些很棒的第三方库，如Selectize、Chosen 或select2，它们实际上将选择元素替换为可样式化的 DOM 树，并使用事件在幕后操纵选择。您可能会发现这些更易于使用。

【讨论】：