html - 什么决定了 Firefox 中的滚动条是否有颜色？

TLDR；我在 Firefox 中遇到了一些有趣的行为。例如，它自动将滚动条样式设置为lime绿色，但不会绿色。 为什么它渲染一个，而不渲染另一个？

在回答另一个问题时，我发现这在 Windows 10 上最新的 Firefox 72 中呈现了一个 limegreen 彩色滚动条:

div {
  background-color: limegreen;
  max-height: 5em;
  overflow-y: scroll;
}
<div>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br></div>

像这样:

但是 Firefox 拒绝呈现浅绿色彩色滚动条:

div {
  background-color: lightgreen;
  max-height: 5em;
  overflow-y: scroll;
}
<div>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br></div>

看这个:

是什么导致了这种行为，我该如何预测？

附言。 Chrome 80 以默认样式显示两个滚动条。

附言。 how to actively change scrollbar color in Firefox 上有 个问题，但我不(现在)对“如何更改滚动条颜色”的实用建议感兴趣，而是我在询问并试图理解何时以及为何它自动发生，并且仅针对一些背景颜色。

最佳答案 

div {
  background-color: lightgreen;
  max-height: 5em;
  overflow-y: scroll;
  scrollbar-color: lightgreen lightgreen;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

使用滚动条颜色有效(更多信息 here )。我认为颜色检测确实存在问题 - 有时一种颜色适用于 scrollbar-color 并适用于滚动条的两个部分，有时您需要重复两次。我只是认为这是 HTML 规范中实现不佳的部分。虽然没有很好的浏览器支持，因此请确保它不是您界面的一部分。

https://stackoverflow.com/questions/60296538/