为何CSS滚动条样式在Firefox不生效却在Chrome正常显示？

你的滚动条样式在Firefox中不生效，核心原因是不同浏览器对滚动条样式的实现标准存在差异：

• Chrome、Edge、IE等基于WebKit/Trident内核的浏览器，依赖WebKit私有伪元素定制滚动条，常用的选择器包括：

  ::-webkit-scrollbar { /* 滚动条整体容器 */ }
  ::-webkit-scrollbar-track { /* 滚动条轨道 */ }
  ::-webkit-scrollbar-thumb { /* 滚动条滑块 */ }
  

  这类带-webkit-前缀的私有选择器仅被WebKit系内核识别，Firefox并不支持。

• Firefox遵循W3C标准的滚动条样式规范，需要使用专属的标准属性设置：

  /* Firefox 自定义滚动条样式示例 */
  .target-element {
    scrollbar-width: thin; /* 可选值：auto/thin/none，控制滚动条宽度 */
    scrollbar-color: #滑块颜色 #轨道颜色; /* 分别设置滑块和轨道的颜色 */
  }
  

  若你只编写了WebKit系的私有样式，Firefox无法解析这些代码，自然不会应用自定义滚动条效果。

另外，若你的Firefox版本过于老旧，可能存在完全不支持自定义滚动条样式的情况，建议确认浏览器版本是否为较新的稳定版。

内容的提问来源于stack exchange，提问作者Sohaib