为什么相同的字符在不同的浏览器中占用不同的空间？

Question

为什么在 Chrome 和 FF 上，绿色背景的字符占用更多空间？ 在 Internet Explorer 上，所有字符占用相同的空间（高度）

我做了一个小提琴 https://jsfiddle.net/xuqa3a0f/

  <div style="background: yellow; float: left">↕</div>
  <div style="background: Chartreuse; float: left">▴</div>
  <div style="background: yellow; float: left">A</div>
  <div style="background: yellow; float: left">B</div>
  <div style="background: yellow; float: left">C</div>
  <div style="background: yellow; float: left">1</div>
  <div style="background: yellow; float: left">2</div>
  <div style="background: yellow; float: left">3</div>
  <div style="background: yellow; float: left">↔</div>
  <div style="background: Chartreuse; float: left">↖</div>

谢谢提前回答。

Answer 1

HTML 中的特殊字符可以使用不同的字体，它们可以有不同的行高。

这里说的很长：http://www.cs.tut.fi/~jkorpela/html/characters.html

但要修复它，您必须使用共同的行高。

如果我在您的示例中使用以下 css 看起来不错：

.cell {
  display: table-cell;
  background: chartreuse;
  line-height: 25px;
}

所以我会说这不是错误，但浏览器对字符的解释不同。