pre的line-height不能直接用var(--lh)是因为浏览器对pre行高计算更刚性，font-family为monospace时变量可能被解析为字符串导致回退normal；需定义--lh为无单位数字并显式声明line-height: var(--lh, 1.6)。
pre标签的line-height为什么不能直接用var(--lh)？
因为pre默认是等宽字体、保留空白符，且浏览器对它的行高计算更“刚性”——它不自动继承父元素的line-height倍数逻辑，尤其当font-family显式设为monospace时，部分引擎会把line-height: var(--lh)里的变量解析为字符串而非数值，导致回退到normal。验证方法：在开发者工具里看pre的Computed面板，若line-height显示为normal且旁边有删除线，说明var(--lh)没生效。
必须确保：--lh定义为无单位数字（如:root { --lh: 1.6; }），且pre规则中显式声明line-height: var(--lh, 1.6);，不能依赖继承。
如何让pre的letter-spacing也响应CSS变量？
letter-spacing支持var()，但要注意两点：
- 变量值必须带单位（如
--ls: 0.05em;或--ls: 1px;），纯数字--ls: 0.05;会被忽略 - 若
pre内嵌套了code或span，它们可能覆盖父级letter-spacing，需加pre code { letter-spacing: inherit; } - 负值慎用：比如
--ls: -0.1em;在小字号下易导致字符粘连，建议只在font-size ≥ 14px时启用
pre里混用不同字号时，line-height变量会失效吗？
会，但不是变量本身失效，而是pre内部的small、span等子元素若未显式重置line-height，其行框高度仍按父pre的font-size×var(--lh)计算，导致视觉错位。例如：
<pre class="brush:php;toolbar:false;" style="line-height: var(--lh, 1.5);"> <span style="font-size: 12px;">小字</span> 正常字号
解决办法只有两个：
- 给子元素加
line-height: 1;（或inherit），强制它用自身字号重新算 - 改用
display: inline-block包裹子元素，再设line-height，绕过pre的固有渲染限制
为什么pre的行高变量在移动端经常“跳变”？
因为多数移动端浏览器（尤其是iOS Safari）对pre的line-height缩放有隐藏限制：当font-size被系统字号放大（如用户开启“更大文本”辅助功能），var(--lh)虽正常计算，但最终渲染会强制截断到某个上限（常见是line-height: 1.8封顶）。这不是bug，是可访问性保护机制。
绕过方式有限，最稳的是：
- 用
@media (prefers-reduced-motion: reduce)或@media (min-width: 320px)单独定义pre的line-height固定值（如1.75），不依赖变量 - 放弃
pre，改用div+white-space: pre+font-family: monospace，完全接管渲染链
变量在pre里不是不能用，而是它暴露了浏览器对等宽文本排版控制权的保留态度——你调的只是“建议值”，不是“指令”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
