1

こんにちは、クライアントの記事 h1 のスタイルをシンプルな背景色とパディングで設定しようとしています。テキストをパディング内で垂直方向および水平方向の中央に配置する必要がありますが、OS X と Windows の間にベースラインの違いがあることがわかりました。少なくともそれが私の最善の推測です。問題のある要素の特定のコードは次のとおりです。

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

スクリーンショットは次のとおりです。

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

Windows では問題なくレンダリングされますが、OS X では数ピクセル高すぎます。ブラウザー全体で同じようにレンダリングされますが、唯一の違いはオペレーティング システム間です。フォントは Quicksand Book で、@font-face 経由で実装されています。サイトの作業バージョンを確認する必要がある場合は、http://angg.nom.es/rosebud で入手できます。なんとかチェックアウトできれば、ホームページの下部にある静的コンテンツのフッターで同じ問題が発生していることに気付くでしょう。

とにかく、どんな助けでも大歓迎です。

4

3 に答える 3

2

特定のブラウザの行の高さを指定する必要があります（痛みを伴う）このタイプのプロパティを使用します：1.1など、ピクセルの指定よりも、私の経験から、より適切に機能します。

また、まだMacでは、SafariとFirefoxの間で、行の高さの違いに気付くでしょう。つまり、これはOSXとWindowsだけではありません。

于 2011-03-19T15:34:32.127 に答える
2

フォント ファイルが正しくない可能性があります。
ローカルにインストールされた Web フォントでも同じ問題が発生しました。ありがたいことに、 Google はWeb フォントと同じフォントを提供してくれ、問題を解決してくれました。

于 2012-12-13T09:21:42.987 に答える
0

オペレーティング システムのデフォルト フォントが異なるためfont-family: Arial、要素の css に を追加します。Arial は OSX と Windows の両方でサポートされているため、OSX と Windows で動作するはずです。

于 2011-03-19T15:26:03.943 に答える