Chrome 选择/下拉控件缺少边框 - 最新 Chrome (69.0.3497)，Windows 10答案

【问题标题】：Chrome Select/Dropdown Control Missing Borders - Latest Chrome (69.0.3497), Windows 10Chrome 选择/下拉控件缺少边框 - 最新 Chrome (69.0.3497)，Windows 10
【发布时间】：2019-03-24 11:07:54
【问题描述】：

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

69.0.3497.100 (Official Build) (32-bit)

在某些显示器上，有一个缺少边框的选择/下拉控件。有时它是正确的；然后当我使用宽度（使其为 px 而不是百分比，添加更多宽度）时，它变成了底部。

但在其他显示器上，此 Select/Dropdown 始终没问题。它总是有所有的边界。从来没有任何问题。

所有显示器的分辨率均为 1920 x 1200（在 Windows 10 中推荐），无论是否存在此问题。使用不同的缩放进行测试 - 100%、80%、120%。一些用户（总是）有这个问题，或者他们没有（永远），都使用相同的浏览器，在任何缩放级别。

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

我能找到的最接近的是很久以前 Chrome 中有一个错误，比如 2012 年，但它早就被修复了，所以我们不能使用这个信息。

Chrome isn't displaying borders (sometimes)

有什么想法吗？

【问题讨论】：

在 Windows 10 上的 Chrome v74 中观察到相同的问题，当 Scale and Layout Windows 设置设置为 125%，但在 100% 时看起来不错。 Chrome 缩放设置为 100%
将我的显示器分辨率从 125% 缩放的 2560x1440 降低到 100% 缩放的 2048x1152，问题就消失了。似乎是 125% 的缩放导致了这个问题。
这刚刚开始发生在我身上，我注意到 .form-control 类使用 calc() 作为高度，如果我将其更改为 height:auto;一切都很好。
只需在它周围添加一个像素填充，它应该可以工作。 stackoverflow.com/questions/12547580/…

标签： html css google-chrome

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

添加另一个包装 div 帮助我解决了这个问题。

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

我在下拉菜单容器中添加了边框，并在下拉菜单类中添加了overflow-y: auto 属性。

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：