当有7个或更多选项

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原始分辨率中的所有像素渲染所有像素＆＃34;因为它意味着渲染＆＃34;。

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

在评论中，如果您正在制定的解决方案不是<select>并且没有任何要求，那么Andrei的解决方案似乎是您要完成的最佳解决方案但是<select>。

  

不幸的是，在渲染<select>元素方面，浏览器自由度非常高，而且它是从 Document 无法控制的级别完成的。原因是多种多样和无关紧要的，但这是现状。如果要完全控制<select>的呈现方式，则需要使用渲染视点中的其他可控元素来模拟其行为，例如<div> s，<span> s或<ul>秒。或者使用一个可以为您提供繁重工作的库，显示易于样式化的元素。

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

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

我想说，一个屏幕上的像素修复解决方案可能会在另一个屏幕上引起问题，具体取决于屏幕分辨率。