Firefox在添加内容时会扩展选择的大小

Question

我目前正在开发一个脚本，将动态内容（通过Ajax获取）加载到select。由于我获得了多个元素，我的代码目前看起来像这样

$.each(data, function(key,val) {
    $("#myselect").append(
        $("<option></option>").val(key).html(val)
    );
});

现在这很好用。当我在Chrome中测试它时，我没有看到任何错误。但后来我再次看了Firefox，FF似乎在添加内容时扩大了设置大小。

Chrome

中的

Firefox

中的

或者，如果您想亲眼看看，I have created a demo fiddle。

我现在的问题显然是，导致这种行为的原因是什么，我该如何抑制它呢？

Answer 1

为select元素添加高度解决了这个问题。

select {
    height: 80px;
    min-width: 50px;
}

Demo

如果您从padding删除option - 元素，则无需调整大小。 Demo