Question

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

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

有谁知道为什么会这样或者如何修复它？谢谢！

编辑：Here's一个小提琴，这样你就可以自己测试一下。

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

Answer 1

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

Answer 2

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

var inputs = $("#One, #Two, #Three").get().every(function(el) {
  return el.value == 0
})

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

众所周知，选择方块很难打造。有一些很棒的第三方库，如Selectize，Chosen或select2，它们实际上用一个样式化的DOM树替换了select元素，并使用事件来操作后面的select场景。您可能会发现这些更容易使用。