code标签默认样式在浅色背景下对比度不足、可读性差且浏览器兼容性不一，需通过优化背景色、文字色、padding、border-radius、line-height和font-family等提升可访问性与视觉协调性。
code 标签默认样式在浅色背景（如 #ffffff 或 #f9f9f9）下常显得灰暗、对比不足，甚至被误认为不可点击或失效。直接沿用浏览器默认的 background-color: #f1f1f1 + color: #444 会降低可读性，尤其对中英文混排、数字、符号较多的代码片段。
为什么不能只靠默认样式
现代浏览器对 code 的默认样式并不统一：Chrome 给 code 加了 font-family: monospace 但没设背景；Firefox 默认带浅灰背景但边距松散；Safari 在深色模式下可能进一步压暗文字。更关键的是——code 是内联元素，若父容器用了 line-height: 1.2 或 padding 不足，文字会紧贴上下边缘，视觉拥挤。
- 不设
padding：字符顶部/底部易被裁切（尤其含g、y、[等下沉字符） - 不设
border-radius：直角块在圆角 UI 中显得突兀 - 用
background-color: #f1f1f1：在#ffffff背景上对比度仅 ~3.2:1，低于 WCAG AA 文本对比度要求（4.5:1）
推荐配色组合（浅底+清晰 code 块）
以下方案均基于浅色背景（如 body { background-color: #ffffff; }），兼顾可读性、无障碍与视觉协调：
-
轻量级方案（适合文档类页面）：
code { background-color: #f5f7fa; color: #2d3748; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.875em; } -
高对比方案（适合技术博客/教程）：
code { background-color: #e2e8f0; color: #1a202c; padding: 0.25em 0.45em; border-radius: 6px; }—— 这组在#ffffff上对比度达 7.1:1 -
带边框强调方案：
code { background-color: #fdfdff; color: #4a5568; padding: 0.2em 0.4em; border: 1px solid #cbd5e0; border-radius: 4px; }
所有方案都避开了 rgba() 背景（防止嵌套时透出父级背景干扰），也未使用 font-weight: bold（加粗会挤压等宽字体字间距）。
立即学习“前端免费学习笔记（深入）”；
别忽略 line-height 和 font-family
仅调颜色不够，code 的可读性极大依赖行高和字体。浅背景上若用系统默认 line-height: normal，多行 code 容易粘连：
- 必须显式设置
line-height: 1.5或更高（1.4–1.6是安全区间） - 优先用
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;—— 这是现代浏览器推荐的等宽栈，比单纯写monospace更可靠 - 避免用
font-size: smaller：它依赖父级字号，响应式下易失控；改用font-size: 0.875em或0.85rem
深色模式下如何平滑过渡
如果你的页面支持深色模式（比如通过 @media (prefers-color-scheme: dark)），千万别只改 body 背景而漏掉 code。否则会出现白底黑字页面里夹着一块灰底深灰字的 code 块——既难读又割裂：
- 统一用
color-scheme: light dark;声明在:root或html上，让浏览器知道你支持双模式 - 在媒体查询里重置
code：code { background-color: #f5f7fa; color: #2d3748; } @media (prefers-color-scheme: dark) { code { background-color: #2d3748; color: #e2e8f0; } } - 注意 Safari 会强制覆盖未声明
color-scheme的页面中的code样式，这是唯一必须加的声明
最常被跳过的其实是 padding 的一致性：浅色模式下 0.2em 看着刚好，深色模式下因背景更深，同样数值可能显得“空”，建议统一用 0.25em 避免微小差异累积。
