pre标签滚动条美化需用::-webkit-scrollbar系列伪元素，仅Chromium/Safari支持；Firefox无法样式化，只能接受原生样式或引入JS库。
pre 标签默认滚动条太丑，怎么换掉
浏览器原生 scrollbar 在 <pre> 里确实难看，尤其深色背景配亮灰滑块时。现代方案靠 CSS ::-webkit-scrollbar 伪元素控制，但注意：这仅在 Chromium 和 Safari 有效，Firefox 完全不支持（它用系统级滚动条，不可样式化）。
实操建议：
- 只对
<pre>或其父容器（如<div class="code-block">）设overflow: auto，避免全局污染 - 必须加
width或max-width，否则pre可能撑破容器导致横向滚动失效 - 滚动条宽度建议设
8px～12px，太细点击困难，太粗破坏代码区视觉平衡 - 深色主题下，
background-color别用纯黑，比如#1e1e1e比#000更易读且滚动条更显
Chrome/Safari 中 pre 滚动条样式写法
直接作用于 <pre> 的伪元素即可，无需额外 wrapper。关键点是：必须同时定义 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 三者，缺一不可，否则样式不生效。
示例（适配深色代码块）：
立即学习“前端免费学习笔记（深入）”；
pre {
overflow: auto;
max-width: 100%;
}
pre::-webkit-scrollbar {
width: 10px;
}
pre::-webkit-scrollbar-track {
background: #252525;
}
pre::-webkit-scrollbar-thumb {
background: #4a4a4a;
border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
background: #6a6a6a;
}
注意：border-radius 建议设为 4px 或 6px，圆角过大会让滑块在窄区域变形；hover 状态必须显式声明，否则无反馈。
Firefox 下 pre 滚动条无法美化怎么办
Firefox 不支持 ::-webkit-scrollbar，也没有等效的 CSS API。你只能接受它的原生样式，或换思路：用 JS 库模拟滚动（如 simplebar），但代价是增加体积、可能破坏 pre 的语义和可访问性。
更务实的做法：
- 保持 Firefox 使用系统滚动条（用户已习惯），只在 Chrome/Safari 做美化，用
@supports隔离样式 - 避免在
pre外层加height+overflow，否则 Firefox 会强制显示双滚动条（外层+内层） - 如果项目强依赖统一外观，考虑用
<div contenteditable="false">替代pre，再套自定义滚动逻辑——但这意味着放弃white-space: pre的天然换行保护
pre 里代码过长时滚动条行为异常
常见现象：横向滚动条不出现、文字被截断、滚动后代码错位。根本原因是 pre 默认 white-space: pre，但若内容含超长无空格字符串（如 base64、长路径），浏览器不会自动折行，又没触发横向滚动。
解决办法：
- 加
word-break: break-all强制断词，但慎用——它可能把变量名userProfileData断成userProfi…，影响可读性 - 更安全的是
overflow-wrap: break-word，只在必要时断开长单词，保留正常单词完整性 - 确保父容器有明确
width，且pre未被设display: inline或flex导致尺寸计算异常 - 若用
highlight.js或Prism，检查是否启用了line-numbers插件——某些版本会在pre内插入绝对定位元素，干扰滚动计算
