即使meyer重置,Chrome和IE9之间的CSS不一致？

Question

左边是Chrome,右边是IE9.

正如您在上面的图片中看到的那样,即使使用Meyer CSS重置,浏览器之间仍然存在不一致.此图中的两个示例:

1. 对于几乎所有文本,IE9显然都有一个较暗的字体.
2. 无论出于何种原因,<hr/>标签都没有排队(但它们确实很接近)并且会抛弃其余的内容.

除了应用Meyer CSS重置以在这些浏览器之间获得更多一致性之外,还有什么我需要做的吗？

此外,使用您在上面看到的内容,除了颜色和字体大小之外,重置后没有应用边距或填充.

CSS

h1 {
    font-family: Lato;
    font-size: 26px;
    font-weight: normal;
    color: #154995;
}

h2 {
    font-family: Lato;
    font-size: 24px;
    font-weight: normal;
    color: #333333;
}

h3 {
    font-family: Lato;
    font-size: 20px;
    font-weight: normal;
    color: #154995;
}

h4 {
    font-family: Lato;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

h5 {
    font-family: Lato;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.small-text {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: regular;
    color: #333333;
}

Answer 1

您指出的差异都是基于在Chrome和IE9输出中使用两种不同字体的事实.一旦你调整了CSS,font-family所以两个浏览器使用相同的字体,那么它应该没问题.

更新:
在看到你的css后,你只指定Lato你的元素的字体,似乎chrome和IE9都找不到字体,Lato所以两者都应用了一个默认字体,它们彼此不同,尝试指定后备字体如:

font-family: Lato, Arial, sans-serif;

如果上面仍然给你不同的输出然后Lato在一个浏览器而不是其他浏览器中选择,你可以通过使用以下方式检查:

font-family: Arial, sans-serif;

对于所有元素,并看到两个浏览器的输出相同.

更新2:
另请参阅有关如何将Lato webfont添加到您的网站的说明:http://www.google.com/webfonts#UsePlace :use/Collection :Lato