html - Chrome 呈现空的多个选择更小

Question

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

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

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

我注意到 Chrome 呈现空的 <select>略小于内容:

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

我用 Chrome 的优秀检查器检查了选择，发现两者之间唯一不同的计算样式是 height , perspective-origin , 和 transform-origin , 最后两个派生自第一个。

我觉得这与 Chrome 在计算高度时使用的一些不可见的占位符有关。我的 jsFiddle 进一步支持了这一点，我在这里创建了 <select> s 是空的，只有 <option> s，只有<optgroup> s 和两者，然后减少 font-size的 <option>标签。 <select>只有 <option>里面的 s 变小了，显然是因为十个 <option>它适合较小的高度。两者兼具的<optgroup> s 和 <option> s 必须保持相同大小才能容纳 10 个 <optgroup>

尝试设置 <optgroup> 的样式s 产生了不一致的结果(即 IE)，所以我没有尝试。

有什么办法可以避免这种情况吗？ Mozilla 和 IE 都呈现 <select>高度相同，这可能是 Chrome 错误吗？

我知道最明显的方法是使用 CSS height 设置高度属性，或者稍后使用 JavaScript 使它们相等。但是，我想继续使用 size属性是为了方便，因为这正是它的设计目的。

Answer 1

...I have set their heights using the size attribute...

其实你开始的时候是错误的。当您设置 size属性，您不定义height .您正在定义 option 的数量s 代替。

来自此处的规范:http://www.w3.org/TR/html5/forms.html#attr-select-size

The size attribute gives the number of options to show to the user.

有区别。高度由 CSS height 定义属性(property)。 HTML size属性定义了选项的数量，可以根据 font-size 改变。 s 和 line-height

---

I noticed that Chrome renders the empty <select> slightly smaller than the one with content

这种行为是意料之中的。如果没有option s，则没有要考虑的内在填充或边距。当至少有一个 option ，浏览器会考虑到这一点。因此，渲染/计算的高度会有差异。

此外，当有一个 optgroup , 那么浏览器也必须适应它才能显示 10 option根据 size属性。因此计算出的高度会稍微大一点。它只需要显示 10 option s 即使是部分的，因为它可以显示滚动条。

Interestingly, the difference in height is the same as the value of the size attribute. In the picture I have size="10" and the empty select is exactly 10 pixels smaller.

那只是因为您也将 font-size 设置为 10。无论如何，当没有option s，则浏览器无法计算高度，只会根据基本字体大小呈现高度。

The <select> with just <option>s in it got smaller, evidently because ten <option>s fit in smaller height.

现在你明白了。

---

Is there anything to be done to circumvent this?

您应该使用适当的 CSS 重置。如果您使用像 Bootstrap 这样的框架，它会为您处理。

你可以从这里开始:

* { box-sizing: border-box; margin: 0; padding: 0; }

fiddle :https://jsfiddle.net/abhitalks/rk7vc87y/3/

片段:

* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 32px; }
select { 
  width: 100px; vertical-align: top; 
  font-size: 11px; line-height: 11px; 
}

<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>

---

Both Mozilla and IE render the s at the same height, so could it be a Chrome bug?

我想说，也许是相反的方式!

---

编辑

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

特别是对于 Chrome，默认的用户代理样式表定义了 min-height的 option作为1.2em .因此，在设置 select 的高度时覆盖它会很有帮助。 .

fiddle 2:https://jsfiddle.net/abhitalks/rk7vc87y/4/

片段 2:

* { 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; }

<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>