CSS设置LaTeX logo时如何避免span垂直偏移产生额外行高

问题原因 #

你当前使用vertical-align调整字符偏移量，浏览器计算行框高度时会将偏移后的字符上下边界全部纳入计算范围，只要偏移后的字符超出了当前行默认的高度范围，就会撑大整行的行间距，即便设置了固定行高也无法覆盖这部分计算逻辑，这是行内元素垂直对齐的标准表现，因此会出现Safari及其他浏览器都存在的异常行高问题。

解决方案 #

方案1（兼容性最好，优先推荐）

将vertical-align替换为相对定位实现视觉偏移，相对定位不会改变元素在正常文档流中的占位尺寸，因此不会影响行高计算，修改后CSS如下：

.TeXE {
    position: relative;
    top: 0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.LaTeXA {
    font-size: 0.85em;
    position: relative;
    bottom: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

该方案完全保留原logo的视觉效果，同时不会对行高产生任何额外影响，全浏览器兼容。

方案2（最小改动适配）

如果不想修改原有偏移逻辑，只需要给两个logo字符的span添加line-height: 0规则即可，强制其不参与行高计算：

.TeXE, .LaTeXA {
    line-height: 0;
}

这个方案改动量最小，也能解决绝大多数场景下的行高异常问题。

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