HTML:在没有选项的情况下选择不同的尺寸

Question

这可能是一个简单的选择框问题，但到目前为止我还没有找到答案: 在我看来，一行有好几个多行选择框，都定义为size=9。我使用 size 属性而不是 height 因为它适合线条(没有线条被切割)。现在我的问题是，当他们在定义的选择中没有选项时，他们会得到不同的高度。

这些选项都是用 AJAX 填充的，但是在开始的时候有些是空的。

您可以在这里查看我的问题:http://jsfiddle.net/nq3gtb7u/5/ (在 IE 中可以，但在 FF 或 Chrome 中不起作用)

但是，我发现问题出在字体系列 Helvetica、Arial，而它在没有任何定义或 Courier(例如 Courier)的情况下工作得很好。

select.wrong
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}
.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}

select.right
{
    font-family: Courier;
    font-size: 8pt;
}
.right option
{
    font-family: Courier;
    font-size: 8pt;
}

<select class="wrong" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="wrong" size="9" style="width:40%;" >
</select>
<br>
<br>
<select class="right" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="right" size="9" style="width:40%;" >
</select>

现在我想知道我可以做些什么来使它们在有或没有选项的情况下具有相同的高度。我尝试设置选项的高度，效果很小。如果我这样设置

.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
    height: 9.75pt;
}

至少 FF 没问题，但 Chrome 不行。此外，它看起来很脏。

感谢您的帮助!

Answer 1

您的 select 元素具有不同的高度，因为 option 元素具有行高和填充。空的 select 元素没有选项行，因此没有什么可以应用填充或行高的。您的浏览器正在猜测正确的高度，但显然失败了。

我只想为空的 select 元素设置一个最小高度。