css - 当包裹在带有溢出的 div 中时，Firefox 会剪辑选择的边缘

Question

我使用的是 Firefox 65 和 OSX 10.11.6，在下面的代码片段中，我看到 <select> 的左边缘缺少边框元素:

div {
  overflow: auto;
}

select {
  padding: 2px;
}

<div>
  <select>
    <option>TEST123</option>
  </select>
</div>

对于使用不同浏览器或配置的用户，它看起来像这样:

谁能解释为什么浏览器呈现没有左侧边框的元素？这是一个错误还是有一些合理的理由说明规则的组合应该产生这个结果？

Answer 1

看起来是溢出导致了这种情况的发生。删除该声明似乎可以解决问题。

虽然不确定为什么会这样。

div {
  overflow: initial;
}

select {
  padding: 2px;
}

<div>
  <select>
    <option>TEST123</option>
  </select>
</div>

另外，脱落的不是边框。如果将边框设置为 1px 红色，则会附加图像。

在这一点上，我认为是浏览器 native 框阴影被切断了。