如何处理CSS在Chrome和Firefox中的滚动条样式不一致？

Chrome 和 Firefox 滚动条样式必须分开写：Firefox 只支持 scrollbar-width（auto/thin/none）和 scrollbar-color（滑块色 轨道色），且仅对 html/body 或 overflow:auto/scroll 容器生效；Chrome 必须成套使用 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，并确保 width/height、background、border-radius 等关键属性完整，同时开发需运行在 https:// 或 localhost 下。

Chrome 和 Firefox 滚动条样式无法用同一套 CSS 统一控制，必须分开写、分别生效——这通常不是异常，是规范差异。

Firefox 只认 scrollbar-width 和 scrollbar-color

它从 64 版本起就完全不解析 ::-webkit-scrollbar，写了也白写，控制台无报错，但样式就是不出现。这两个属性必须成对使用，且只在以下场景生效：

1. html 或 body 元素上（对局部 div 滚动区无效）
2. 容器本身设置了 overflow: auto 或 overflow: scroll
3. scrollbar-width 只接受 auto、thin、none 三个值，没有像素级控制
4. scrollbar-color: #666 #eee 必须按“滑块色 轨道色”顺序写，第二个值设为 transparent 会导致轨道不可见但滑块仍可拖，体验断裂

Chrome 必须成套写 ::-webkit-scrollbar 伪元素

漏掉任意一个关键伪元素，整个链式样式就会回退到系统默认。常见失效原因包括：

1. 没写 ::-webkit-scrollbar 自身的 width（垂直）或 height（水平）——这是起点，缺了后面全不渲染
2. 没写 ::-webkit-scrollbar-track，尤其在深色背景上，轨道透明会直接“消失”
3. ::-webkit-scrollbar-thumb 没设 background，或 border-radius 超过宽高一半（如 width: 6px 却设 border-radius: 4px）
4. 父容器用了 overflow: hidden 或 transform，创建新层叠上下文，把滚动条裁掉了
5. 开发时跑在 file:// 或 HTTP 页面下——Chrome 120+ 会静默禁用 ::-webkit-scrollbar，必须用 https:// 或 localhost（含端口）

Tailwind 用户要特别注意 nocompatible: true

默认的 tailwind-scrollbar 插件只输出 WebKit 规则，对 Firefox 完全跳过。这意味着：

1. scrollbar-none 在编译后 CSS 里根本不存在，除非你显式启用兼容模式
2. 配置必须写成：require('tailwind-scrollbar')({ nocompatible: true })
3. scrollbar-thumb-blue-500 单独存在不会生成任何规则；必须和 scrollbar-track-gray-200 同时加在同一个元素上，插件才输出 scrollbar-color: #3b82f6 #e5e7eb
4. scrollbar-thin 在 Firefox 下实际无效（thin 不是合法值），等价于没写

iOS Safari 和移动端基本不响应任何滚动条 CSS

这不是遗漏或写法问题，是苹果明确的设计决策：

1. iOS Safari（含 iPadOS）无视所有 ::-webkit-scrollbar、scrollbar-width、scrollbar-color
2. Android Chrome 仅部分支持 ::-webkit-scrollbar，且要求容器显式设 overflow-y: scroll（auto 可能被跳过）
3. Firefox for Android 只响应 html 或 body 上的 scrollbar-width 和 scrollbar-color，局部容器无效
4. 移动端没有 hover 状态，::-webkit-scrollbar-thumb:hover 写了也无效

最常被忽略的一点：Win10/Win11 下 Firefox 滚动条视觉差异无法靠 CSS 抹平——这是系统 UI 层行为，不是样式没写对。若强求一致，唯一可靠路径是 scrollbar-width: none 彻底隐藏，再靠 overflow-y: auto 保证滚动能力不受影响。