Question

我们正在使用最新的Chrome和Windows 10，

69.0.3497.100 (Official Build) (32-bit)

在某些监视器上，缺少边框的Select / Dropdown控件。有时候这是正确的；然后当我使用宽度播放时（将其设置为px而不是百分比，增加更多的宽度），它将变为底部。

但是在其他监视器上，此“选择/下拉”始终很好。它始终具有所有边界。从来没有任何问题。

所有显示器的分辨率均为 1920 x 1200 （在Windows 10中推荐），无论有问题还是没有问题。经过不同缩放比例测试-100％，80％，120％。有些用户（总是）有这个问题，或者（永远）没有，都使用相同的浏览器，并且没有缩放级别。

控件上没有特殊的CSS样式。实际上，即使我要添加border: 1px solid也不会影响系统选择区域。这只会影响顶级框。

我能找到的最接近的东西是，很久以前，Chrome就在2012年出现了一个错误，但已经修复了很久，因此我们无法使用此信息。

有什么想法吗？

Answer 1

我知道它来晚了，但是我最近才遇到此错误，并且能够通过调整font-size元素中的<option>来修复它。尝试摆弄font-size，直到您再也看不到问题为止，这就是我解决的方法。

Answer 2

添加另一个包装器div可以帮助我解决此问题。

<div class="dropdown-menu-container">
    <div class="dropdown-menu">
        // items
    </div>
</div>

我在dropdown-menu-container中添加了边框，并在dropdown-menu类中添加了overflow-y: auto属性。

这解决了我的问题。希望这可以帮助。

Answer 3

检查下拉控件的父div是否缺少“ overflow：visible” CSS属性。根据您的图片示例，父div的约束在显示时似乎会中断下拉菜单。

另外，请考虑使用Chrome的Inspect功能来分析此问题。在Chrome中，右键单击下拉菜单，然后选择“检查”。您还可以使用Inspect进行特定于浏览器的CSS更新，以查看外观如何变化。看起来不错后，您可以返回并相应地更新适用的文件。

Answer 4

显然，尝试在 select 元素上设置 padding 或 width 时出现了此问题。

Answer 5

调整 #dropdown { overflow-y:auto;}