如何解决语法高亮中混合字体行高不一致的问题？

这个问题我在项目里碰到过好多次了——当同一个容器里混用fixed字体（比如Courier）和sans-serif字体（比如Arial）时，很容易因为两种字体的默认行高、基线位置或者字体度量差异，导致整体行高错位，就像你例子里红色下划线不对齐的情况。

下面给你几个实用的解决方案，按稳妥程度排序：

1. 统一设置行高（最推荐） #

给父容器.wrapper明确指定一个固定的行高，同时让子元素.delim继承这个行高，强制两种字体使用相同的行高规则：

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
  line-height: 1.5; /* 可以用相对值，也可以用具体像素比如18px，根据你的需求调整 */
  margin-bottom: 8px; /* 加个间距方便看效果 */
}
.delim {
  font-family: Courier, fixed;
  line-height: inherit; /* 继承父元素的行高 */
}

这样不管两种字体本身的默认行高是多少，都会统一使用你设置的值，行高不一致的问题基本就能解决。

2. 调整垂直对齐（处理细微错位） #

有时候即使行高统一了，还是会有一点点基线错位的情况，这时候可以给.delim设置vertical-align属性，让它和周围的sans-serif文本对齐到同一基线：

.delim {
  font-family: Courier, fixed;
  vertical-align: baseline; /* 或者试试middle，根据实际效果调整 */
}

不同字体的基线位置可能略有差异，这个属性可以帮你微调对齐效果。

3. 使用font-size-adjust统一字体度量（进阶方案） #

如果想要更精细的排版一致性，可以用CSS的font-size-adjust属性，它能让不同字体保持相同的x-height（小写字母的高度），从而让视觉上的行高和对齐更统一：

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
  font-size-adjust: 0.58; /* Arial的x-height与字体大小的比例大概是0.58 */
}
.delim {
  font-family: Courier, fixed;
  font-size-adjust: 0.58; /* 和父元素保持相同的比例 */
}

这个方法需要你先查一下主字体的x-height比例，现代浏览器都支持，但如果要兼容旧版浏览器的话，还是优先用前两种方法。

你可以先试试第一种方案，这是最通用且稳妥的，大部分场景下都能解决你的问题。

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