在Mac / PC浏览器中，填充和行高不一致

Question

我看到a couple of elements on this page中的行高/填充有一些非常显着的差异，特别是页面标题（查尔斯达纳中心）和“学术青年发展”标题。在Mac上的Safari / FF上，文本被挤压到它们的顶部;在PC上的所有浏览器中，它看起来几乎是均匀垂直间隔。

如果重要的话，我会运行css-reset和Modernizr。

这是网站标题的css：

.site-title h1 {
    font-size:2.5em;  
    margin:.1em 0em 0em;
    text-transform: none;  
}
.site-title a {
    display:inline-block;
    text-decoration: none;
    color:#0363a8;
    text-shadow:1px 1px 1px #82B2D9;
    line-height:1em;
    border: none;   
}

这是蓝色背景页面标题的CSS：

.parent-title {
    font-size:2em;
    color: #0D72BA;
    font-family: 'Bree Serif',Georgia,'Times New Roman',serif;
    font-weight:400;
    border: none;
    background-color:#D8E1F1;
    border-radius:8px;
    display:block;
    padding:.2em .5em .2em;
    margin-bottom:.72em;
    line-height:1em;
}

非常感谢你的帮助！