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

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;
}

所以我想说这不是一个错误，但浏览器会以不同的方式解释字符。