标题标签的内容以不同方式显示

Question

自从我做了一个更大的网站以来已经有一段时间了（2年？）我现在正在开发一个，像往常一样，我遇到了一些跨浏览器的困难。

我现在解决的问题可以在下面的图片中看到 - 我有一个带有h2元素的页面，它在Chrome和IE 11中的显示方式不同。该元素具有所有属性，如line-height，font-size ，填充，边距和指定的堡垒，但仍然显示不同。在一个浏览器中，文本位于元素的顶部，而另一个浏览器位于中间。这会导致一些图形问题，而且我似乎找不到解决这个问题的方法，而无需为每个浏览器编写特定于浏览器的css定义（Firefox做了类似的事情，并且在这两个中间的某个地方 - 文本位于元素的上半部分，但不在其顶部）。

其他类似的元素如h1也会受到影响。

我知道这可能与这些浏览器处理字体和计算其定位的方式有关，但目前，这对我没有多大帮助。我很感激你的任何建议，因为我可能不是第一个解决这个问题的人。

编辑： 我不会在这里插入HTML代码，因为这会影响所有这些元素，无论它们出现在何处。例如，页面中突出显示的文本是具有以下CSS属性的普通h2：

color: rgb(0, 0, 0);
display: block;
font-family: 'Myriad Pro', Arial;
font-size: 22px;
font-weight: bold;
height: 27px;
margin-bottom: 0px;
margin-top: 20px;
text-transform: none;
width: 634px;

正常

有这个css：

font-size: 14px;
margin-top: 10px;
margin-bottom: 12px;
line-height: 17px;

Answer 1

所以我找到了解决方案。有点意外，但有道理。

我正在使用Adobe的Typekit，这类似于谷歌字体。我实际上发现这个文本转换的原因是我正在使用typekit字体。当我切换到Arial时，一切都很好。

我也来了一篇描述主题的文章：http://blog.typekit.com/2010/09/13/updating-vertical-metrics-for-cross-platform-consistency/

问题与我使用的给定字体中的基线和em框设置错误有关。切换到正确设置了这些属性的另一种字体可以解决我的问题。

感谢您的帮助。