文本（特殊 unicode，如 ⇑）在 IE11 中不垂直居中

Question

给定以下 css 代码，文本（箭头）在 Chrome 中垂直居中，而在 IE11 中不是，有人能告诉我为什么以及如何在 IE11 中实现相同的效果吗？

span {
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: blue;
  color: white;
  font-size: 2rem;
}

<span>&#8657;</span>

截图：

Chrome:

IE11:

Answer 1

默认情况下，计算出的 font-family 是 Times New Roman，如检查视图所示：

但是，Times New Roman 不支持通过 supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1) 查看。在这种情况下，浏览器可以自由选择要使用的字体，我们不知道字符将如何对齐（因为我们不知道浏览器选择在内部使用哪种后备字体），这导致行为从浏览器。

那么如何让它垂直居中呢？一种简单的方法是显式指定包含 ⇑ (U+21D1) 的 font-family，例如 Cambria

span {
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: blue;
  color: white;
  font-size: 2rem;
  font-family: Cambria;
}

<span>&#8657;</span>