如何使css对所有浏览器有效？

我定义了以下css样式：

.scrollbar {
    float: left;
    background: #fff;
}
.scrollbar-primary::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #4285F4;
}

---

在运行时，它只在谷歌浏览器上运行。当我通过Mozilla Firefox运行该应用程序时，该应用程序无法正确渲染所需的渲染效果。那么，如何使样式应用于所有浏览器？

您无法在所有浏览器中实现此CSS<代码>-webkit是支持webkit或Blink浏览器引擎的浏览器的供应商前缀。即使在支持此前缀的浏览器中，当前的支持也不一致：

如果您确实需要一个完全定制的、完全跨浏览器兼容的scrollbar实现，那么您很可能需要研究一个基于JavaScript的解决方案

---

好消息是，由于这是一个供应商前缀，不支持它的浏览器将忽略声明，并以浏览器通常显示其滚动机制的任何方式加载滚动条。

有很多资源可以帮助您通过搜索来解决这一问题。到目前为止，你研究了什么？有趣的一点是……早在2000年早期/中期，大多数Windows浏览器都支持定制的滚动条颜色。