html - 当有 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>

当您打开选择框时，您会注意到底部有一条 1px 的白线。

这可以修复吗？

编辑:Chrome 版本 65.0.3325.146

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

Answer 1

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

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

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

查看评论，如果您正在制定的解决方案要求不高，Andrei 的解决方案似乎是您尝试完成的最佳解决方案 <select>只有一个<select> .

Unfortunately, when it comes to rendering <select> elements, browser liberty is quite high and it's done from a level that's not controllable from Document. The reasons are various and irrelevant, but this is the current state of things. If you want complete control over how <select>s are rendered, you need to mock their behavior using other more controllable elements from a rendering point of view, such as <div>s, <span>s or <ul>s. Or use a library that does the heavy-lifting for you, displaying easily style-able elements.

这是我的外接显示器，底部有白线

在我的高分辨率 Surface Pro 4 上使用它时，完全相同的窗口 (Chrome) 看起来像这样，最后没有白线。

我会说，一个屏幕上的像素修复解决方案可能会导致另一个屏幕出现问题，具体取决于屏幕分辨率。