1

左側はChrome、右側はIE9です。

ここに画像の説明を入力してください

上の画像でわかるように、Meyer CSS Resetを使用しても、ブラウザー間にはまだ不整合があります。この画像の2つの例：

  1. IE9は、ほぼすべてのテキストに対して明らかに暗いフォントを使用しています。
  2. なんらかの理由で、<hr/>タグが並んでおらず（ただし、タグは確かに近くにあります）、それによって残りのコンテンツが破棄されます。

これらのブラウザ間の一貫性を高めるためにMeyerCSSResetを適用する以外に、私がしなければならないことがありますか？

さらに、上記のコンテンツでは、色とフォントサイズを除いて、リセット後に余白やパディングが適用されることはありません。

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

あなたが指摘する違いはすべて、2つの異なるフォントがChromeとIE9の出力で使用されているという事実に基づいています。両方のブラウザが同じフォントを使用するようにcssを微調整したら、問題font-familyないはずです。

更新：
cssを確認した後、要素のフォントのみを指定Latoしています。chromeとIE9の両方がフォントを見つけられないようです。Latoそのため、どちらもデフォルトのフォントを適用しています。これは、それぞれ異なるデフォルトのフォントを適用しています。次のようなフォールバックフォントを指定してみてください。 ：

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

上記でも異なる出力が得られる場合Latoは、1つのブラウザで選択されており、他のブラウザでは選択されていない場合は、次を使用して確認できます。

font-family: Arial, sans-serif;

すべての要素について、出力が両方のブラウザで同じであることを確認してください。

更新2：
Lato WebフォントをWebサイトに追加する方法の説明も参照してください： http ：//www.google.com/webfonts#UsePlace：use / Collection：Lato

于 2012-12-13T13:31:35.680 に答える
1

私によるとfont-family、使用しているのはおそらくシステムフォントではなく、Webフォントなので、1つのブラウザがWebフォントを使用し、他のブラウザは使用していないため、デフォルトのTimes New Romanフォントが使用されます。

于 2012-12-13T13:45:40.717 に答える