在Firefox浏览器中，选择框的文本变得异常大

Question

在Safari、Chrome和Opera中，大小为20px的<select>框看起来像这样：

然而，在Firefox中，它看起来像这样:

有人知道这是怎么回事或者如何解决吗？谢谢！

编辑：这里 有一个Fiddle，你可以自己测试。

编辑2：这似乎是Mac OS X的问题，因为Windows用户没有看到它。

- Alexcamostyle

---

在 Chrome、IE11 和 Firefox 上看起来完全一样。或许可以尝试在 FF 上按下 Ctrl+0。 - Michael Benjamin

尝试设置-moz-appearance:none;，这将重置默认的浏览器样式，因为每个浏览器都会为某些元素带来自己的样式。 - Antonio Smoljan

我猜你在使用OSX，而@Michael_B则是在使用Windows。（只是使用Safari和IE11浏览器来确定）。我也在使用OSX，我遇到了这个问题，火狐浏览器的文本异常地大。 - Madivad

@AntonioSmoljan：我刚试了一下，它让选择框看起来像这样：http://i.imgur.com/0BswkLA.png - Alexcamostyle

@Madivad：所以这是一个OS X的问题。有趣。 - Alexcamostyle

我现在在移动设备上，但建议您查找Firefox默认CSS，可能还要加入osx。 - Madivad

Answer 1

您可以使用这些代码在Webkit和Firefox中关闭选择框的默认样式：

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

然而，这是一个棘手且非标准的解决方案。字体大小会改变，但您也会失去所有其他东西，包括箭头。

选择框架极难进行样式设置。有一些很棒的第三方库，例如Selectize、Chosen或select2，它们实际上用可样式化的DOM树替换了选择元素，并使用事件在幕后操作选择。您可能会发现这些更容易使用。

- Jeremy Swinarton

Answer 2

我建议使用em，这将使您在所有浏览器中获得更多的标准。 20px = 1.25em

这里有其他可供选择的选项

- Cam Beatty

---

我尝试使用 em，但没有改变任何东西。不过感谢您的回复。 - Alexcamostyle