Question

我的情况是两个multiple select彼此相邻，其中一个开始为空。我使用size属性设置了它们的高度。

<select multiple="multiple" size="10">
</select>

<select multiple="multiple" size="10">
    <option>option</option>
</select>

我注意到Chrome将空<select>呈现为略小于内容的size：

有趣的是，高度的差异与size="10"属性的值相同。在图片中，我有height，空的选择正好小10个像素。

我使用Chrome浏览器的优秀检查员检查了这些选项，发现两者之间唯一不同的计算样式是perspective-origin，transform-origin和<select>，最后两个来自第一个。

我觉得这与Chrome在计算高度时使用的一些隐形占位符有关。我的jsFiddle进一步支持了这一点，我创建的<option>为空，只有<optgroup> s，只有font-size s，两者都有，然后减少了https://issues.apache.org/jira/browse/CAMEL-9247 {1}}标记的{1}}。只有<option> s的<select>变得更小，显然是因为十个<option>适合较小的高度。同时包含<option>和<optgroup>的人必须保持相同的大小才能容纳10 <option> s。

尝试设置<optgroup>的样式会产生不一致的结果（即IE），所以我没有尝试过。

有什么办法可以绕过这个吗？ Mozilla和IE都将<optgroup>渲染到相同的高度，那么它可能是Chrome错误吗？

我知道显而易见的方法是使用CSS <select>属性设置高度，或者稍后使用JavaScript使它们相等。但是，为了方便起见，我希望继续使用height属性，因为这正是它的设计目的。

Answer 1

...我已经使用size属性设置了它们的高度......

其实你错了。设置size属性后，不定义height。您正在定义option的数量。

根据此处的规格：http://www.w3.org/TR/html5/forms.html#attr-select-size

size属性给出了向用户显示的选项数量。

有区别。高度由CSS height属性定义。 HTML size属性定义了选项的数量，这些选项可以根据font-size和line-height来更改。

我注意到Chrome渲染的空<select>略小于option 内容
的那个

应该预期这种行为。如果没有option s，那么就没有内在的填充或边距需要考虑。当至少有一个optgroup时，浏览器会将其考虑在内。因此，渲染/计算高度会有所不同。

此外，当有option时，浏览器也必须容纳该size，以便能够根据option属性显示10个option。因此计算出的高度会稍大一些。它只需要显示10 <select> s，即使其中一个是部分的，因为它可以显示滚动条。

有趣的是，身高的差异与身高的差异相同 size属性。在图片中我有size =“10”而空选择正好小10个像素。

这只是因为你已经将font-size设置为10。无论如何，当没有<option>时，浏览器无法计算高度，只能根据基本字体大小呈现高度。

只有<option> s的* { box-sizing: border-box; margin: 0; padding: 0; }变小了，显然是因为十* { box-sizing: border-box; margin: 0; padding: 0; } div { margin: 32px; } select { width: 100px; vertical-align: top; font-size: 11px; line-height: 11px; }适合较小的高度。

现在你明白了。

有什么办法可以绕过这个吗？

您应该使用适当的CSS重置。如果您使用像Bootstrap这样的框架，它将为您服务。

你可以从这里开始：

<div>
    <select multiple="multiple" size="10"></select>
    <select multiple="multiple" size="10">
        <option>option</option>
    </select>
    <select multiple="multiple" size="10">
        <optgroup label="optgroup"></optgroup>
    </select>
    <select multiple="multiple" size="10">
        <optgroup label="optgroup">
            <option>option</option>
        </optgroup>
    </select>
</div>

小提琴：https://jsfiddle.net/abhitalks/rk7vc87y/3/

<强>段：

height

min-height

Mozilla和IE都将s渲染到相同的高度，也可以它是Chrome的错误吗？

我想说，这可能是另一种方式，也许！

修改

如果您想让它在所有浏览器中显示完美的像素，那么您必须通过CSS设置option。

特别是对于Chrome，默认的用户代理样式表将1.2em的{{1}}定义为select。因此，在设置* { box-sizing: border-box; margin: 0; padding: 0; } div { margin: 32px; } select { width: 100px; height: 11em; vertical-align: top; } option { font-size: 0.9em; min-height: 1.1em; height: 1.1em; }。

的高度时覆盖它会很有帮助

小提琴2：https://jsfiddle.net/abhitalks/rk7vc87y/4/

代码段2：

<div>
    <select multiple="multiple" size="10"></select>
    <select multiple="multiple" size="10">
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
    </select>
    <select multiple="multiple" size="10">
        <optgroup label="optgroup"></optgroup>
    </select>
    <select multiple="multiple" size="10">
        <optgroup label="optgroup">
            <option>option</option>
        </optgroup>
    </select>
</div>

chan

Chrome会将空的多个选项缩小

1 个答案:

修改