在HTML中，有没有办法阻止♭字符下移？

Question

我正在尝试编写一个简单的 HTML 页面来输出音乐和弦。 我显示随机生成的和弦来练习和弦变化（就像使用抽认卡）。

当我输出包含“平”符号的和弦时，整个和弦似乎向下跳跃 - 它增加了封闭的

<div>

的垂直高度并出现在底部。其他和弦（带“升”或不带“升”和弦）按预期显示。

JSFiddle 演示：https://jsfiddle.net/blatwell9/qjfcLtdv/3/

有没有办法防止降档的发生？

下移示例

演示效果的代码。 注意显示

<div>

和和弦

<span>

的背景时的效果：

* {margin: 0; padding: 0;}
body {font-family: sans-serif;}
.chord-div {font-size: 3em; background: lightgreen; margin: .1em;float: left}

#sharp {background: lightblue; border: 1px blue solid;}
#flat {background: lightblue; border: 1px blue solid;}

<div class="chord-div">
<span id="sharp">A&sharp;</span>
</div>
<div class="chord-div">
<span id="flat">A&flat;</span>
</div> 

Answer 1

您需要定义

line-height

。在这种情况下，

1

有效。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

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

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

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

<div class="chord-div">
  <span id="sharp">A&sharp;</span>
</div>
<div class="chord-div">
  <span id="flat">A&flat;</span>
</div>