HTML中如何防止♭（降号）字符出现向下偏移问题？

我正在做一个用来展示音乐和弦的简单HTML页面，通过随机生成和弦来练习和弦转换（类似抽认卡）。但发现一个问题：当显示带♭（降号）的和弦时，整个和弦会向下偏移——外层<div>的垂直高度会被撑大，而且和弦本身会贴在底部显示；但带♯（升号）或者无符号的和弦显示都正常。

有没有办法阻止这种向下偏移的情况？

偏移示例代码 #

以下是演示该效果的代码：

JavaScript

function showChord() {
  document.getElementById("chord").innerHTML = chordList[chordIndex];
  document.getElementById("chordWithLineHeight").innerHTML = chordList[chordIndex];
  
  chordIndex++;
  if (chordIndex > chordList.length -1) chordIndex = 0;
  
  setTimeout(showChord, 1500);
}

let chordIndex = 0;
let chordList = ["♯","♭"];
showChord();

CSS

* {margin: 0; padding: 0;}
body {font-family: sans-serif;}

.chord-div {font-size: 3em; background: lightgreen; margin: .1em; }

#chord {background: lightblue; 
      border: 1px blue solid;}
      
#chordWithLineHeight {background: lightblue; 
      border: 1px blue solid; 
      line-height: 1}

HTML

<h3> No line-height set </h3>
<div class="chord-div">
  <span id="chord"></span>
</div>

<h3> With line-height set </h3>
<div class="chord-div">
  <span id="chordWithLineHeight"></span>
</div>

这个问题的核心是特殊符号的基线对齐差异：降号（♭）的字形基线默认比升号（♯）更靠下，会导致行盒高度被拉伸，同时元素位置偏移。可以通过以下几种方法解决：

方法1：统一垂直对齐与固定行高 #

给外层容器设置固定行高，同时给和弦元素添加vertical-align: middle，强制所有符号保持一致的垂直位置：

.chord-div {
  font-size: 3em;
  background: lightgreen;
  margin: .1em;
  line-height: 1.2; /* 根据字体大小调整，确保能容纳所有符号 */
}

.chord-div span {
  background: lightblue;
  border: 1px blue solid;
  vertical-align: middle; /* 强制居中对齐，抵消基线差异 */
}

方法2：使用inline-block固定高度 #

将和弦元素设为inline-block，设置固定高度并通过line-height让内容垂直居中，彻底摆脱基线的影响：

.chord-div span {
  display: inline-block;
  height: 1.2em; /* 与外层line-height匹配 */
  line-height: 1.2em;
  vertical-align: middle;
  background: lightblue;
  border: 1px blue solid;
}

方法3：优化字体渲染 #

部分通用字体对音乐符号的排版支持不佳，换用对特殊符号更友好的字体（如Arial Unicode MS、Segoe UI Symbol），或开启字体渲染优化：

.chord-div {
  font-family: "Arial Unicode MS", "Segoe UI Symbol", sans-serif;
  text-rendering: optimizeLegibility;
}

HTML

<h3> 修复后效果 </h3>
<div class="chord-div">
  <span id="chord"></span>
</div>

CSS

* {margin: 0; padding: 0;}
body {font-family: sans-serif;}

.chord-div {
  font-size: 3em;
  background: lightgreen;
  margin: .1em;
  line-height: 1.2;
}

.chord-div span {
  background: lightblue;
  border: 1px blue solid;
  vertical-align: middle;
}

JavaScript

function showChord() {
  document.getElementById("chord").innerHTML = chordList[chordIndex];
  chordIndex++;
  if (chordIndex > chordList.length -1) chordIndex = 0;
  setTimeout(showChord, 1500);
}

let chordIndex = 0;
let chordList = ["♯","♭"];
showChord();

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