当有7个或更多选项时,Chrome中的选择框是1px太高了

Question

在Chrome中尝试此功能(在Firefox中可以正常运行):

opened box is perfect size with 6 or fewer options
<br>
<select>
    <option style="background-color:red">red</option>
    <option style="background-color:green">green</option>
    <option style="background-color:blue">blue</option>
    <option style="background-color:cyan">cyan</option>
    <option style="background-color:yellow">yellow</option>
    <option style="background-color:magenta">magenta</option>
</select>
<br>
opened box is 1px too high with 7 or more options
<br>
<select>
    <option style="background-color:red">red</option>
    <option style="background-color:green">green</option>
    <option style="background-color:blue">blue</option>
    <option style="background-color:cyan">cyan</option>
    <option style="background-color:yellow">yellow</option>
    <option style="background-color:magenta">magenta</option>
    <option style="background-color:gray">gray</option>
    <!-- here is 1px white when opened -->
</select>

打开选择框时,您会注意到bottem上有1px的白线.

这可以修复吗？

编辑:Chrome版本65.0.3325.146

编辑2:它似乎取决于屏幕分辨率(在1920x1080和1920x1200上测试)

Answer 1

我想说这与屏幕缩放有关。我使用的是 2560x1440 分辨率的屏幕，可以在选择框中设置的任意数量的选项上看到问题。当我将其向下拖动到 2736 x 1824 屏幕时，我从未看到底部的那条白色线。

后者是 Surface Pro 4，它以 Win 10 原生分辨率渲染所有像素，“按其应有的渲染方式”渲染所有像素。

我怀疑在某些情况下，对于这个特定问题，不同的屏幕分辨率可能存在差距。

查看评论，如果您正在制定的解决方案要求不高，<select>并且除了<select>.

不幸的是，当涉及到渲染元素时，浏览器的自由度相当高，并且它是在Document<select>无法控制的级别上完成的。原因多种多样且无关紧要，但这就是目前的情况。如果您想完全控制s 的渲染方式，则需要使用其他从渲染角度更可控的元素（例如s、s 或s）来模拟它们的行为。或者使用一个库来为您完成繁重的工作，显示易于设置样式的元素。<select><div><span><ul>

This is from my external monitor with the white line at the bottom

When using it on my higher resolution Surface Pro 4, the exact same window (Chrome) looks like this without the white line in the end.

I would say, that a pixel-fix solution on one screen, might cause issues on another depending on the screen resolution.