如何消除HTML元素文本高度中不必要的额外空间？

问题：

最好在使用H2元素时进行描述。当这个元素的高度是你设计的关键时，你会遇到一个巨大的问题。在多个设备上，高度是不同的，因此可能会真正打乱您的设计

如下图所示。问号旁边的黑色区域显示了mobile safari上出现的不需要的“额外空间”

自己试试看

我找到了一种你可以自己测试的方法。只要在不同的设备上打开此链接，您就会看到，使用完全相同的代码片段，实际高度是不同的

研究

 - MAC Chrome  : 18px 
 - MAC Safari  : 18px
 - MAC Firefox : 17px
 - iPad        : 20px
 - iPhone      : 20px
 - Android     : 19px
 - WIN Chrome  : 18px
 - WIN IE      : 18px

可能的答案

font-size: 13px; 
line-height: 1.231; // Borrowed from HTML5 Boilerplate

---

这似乎是一个在Mobile Safari中如何实现粗体文本的问题。这在两种没有粗体文本的浏览器中都适用：

但是，粗体文本在不同的高度呈现，再加上浏览器在默认情况下将文本垂直居中于行高的事实，使得简单的通用解决方案变得困难

---

因此，如果你可以不使用粗体文本，这应该没问题。

这里讨论一下这个问题：你是否在iPad/iPhone上测试过这个问题，因为这个错误仍然存在。我确实有突破，我在iPhone上做了测试。手头没有iPad。你在iPhone上看到了什么？