Question

中

<select>
    <option value="0"></option>
</select>
<select>
    <option value="0"></option>
    <option value="1">A</option>  
</select>

这两个下拉列表之间的高度差为1px。

我认为当一个select只包含一个空选项时会发生这种情况。

我应该避免使用空的默认选项吗？或者你知道有什么方法可以解决这个问题吗？

我在FF 27.0.1（Ubuntu 13.10和Windows Server 2008）和IE 10（Windows Server 2008）中看到了这个问题。

由于汉纳斯

Answer 1

这种情况正在发生，因为您没有为select元素指定高度，因此默认情况下，其高度由其内容决定。如果您的select元素只有一个空option，因为没有内容，就没有高度。

CSS解决方案

CSS解决方案是简单地为select元素添加默认高度：

select {
    height: 20px;
}

JSFiddle demo

HTML解决方案

正如其他人在此处所提到的，HTML解决方案是使用一些内容填充空option：

<select>
    <option value="0">&nbsp;</option>
</select>

JSFiddle demo

在这种情况下， 是不间断的空间实体。

就个人而言，我选择了CSS选项。

Answer 2

现在没有不同的高度：D

变化

<option value="0"></option>

到

<option value="0"> </option>

http://jsfiddle.net/2SuN8/2/

Answer 3

是的，你应该避免空选择选项。相反，您可以为第一个选项设置空值。

<select>

    <option value=""> - - select - -</option>
    <option value="a"> A </option>
     <option value="b"> B </option>

</select>

Answer 4

设置宽度和/或高度，它们的大小相同。

<select style="width:100px; height:20px;">
    <option value="0"></option>
</select>

<select style="width:100px; height:20px;">
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2">B</option>    
</select>

编辑：我的版本是快速而肮脏的版本，如果您想要正确的方法，请使用单独的CSS文件或空间替代品，如其他人所描述的那样。

Answer 5

它发生的原因是在某些浏览器（例如Firexox）中，select元素由于某种原因会增长以容纳其最大的选项值，尽管值可能不会以与在选项。

例如：

<select>
    <option value="0"></option>
</select>

<select>
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2" style="font-size:20px">B</option>
</select>

演示：http://jsfiddle.net/Guffa/2SuN8/3/

在Firefox中，select元素的高度足以容纳20px文本，但如果选择B选项，则不会显示为option指定的字体大小{1}}，但是为select指定了字体大小。

一种解决方法是将特定高度设置为select。针对空选项的特定情况的解决方法可能是在其中使用空格，如Sharky所示。

如果只存在一个空选项，为什么SELECT有不同的高度？

5 个答案:

CSS解决方案

HTML解决方案