1

左边是Chrome，右边是IE9。

在此处输入图像描述

如上图所示，即使使用Meyer CSS Reset，浏览器之间仍然存在不一致。此图中的两个示例：

  1. IE9 显然对几乎所有文本都有一个较暗的字体。
  2. 无论出于何种原因，<hr/>标签没有对齐（但它们肯定很接近）并且会丢弃其余内容。

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

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

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;
}
4

2 回答 2

5

您指出的差异都是基于您的 chrome 和 IE9 输出中使用了两种不同的字体这一事实。一旦你调整了css font-family，让两个浏览器都使用相同的字体，那么它应该没问题。

更新：
看到你的 css 后，你只Lato为元素指定字体，似乎 chrome 和 IE9 都找不到字体Lato，所以两者都在应用默认字体，这是彼此不同的，尝试指定后备字体，如：

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

如果上面仍然为您提供不同的输出，则Lato在一个浏览器中而不是其他浏览器中选择，您可以使用以下方法进行检查：

font-family: Arial, sans-serif;

对于您的所有元素，并查看两个浏览器上的输出相同。

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

于 2012-12-13T13:31:35.680 回答
1

根据我的说法，font-family您使用的可能不是系统字体，而是网络字体，所以这里的问题是 1 个浏览器正在占用网络字体，而其他浏览器没有，所以使用默认Times New Roman字体

于 2012-12-13T13:45:40.717 回答