次のマークアップがあります。
<div class="blockSection">
<h5>Title of the section</h5>
...
</div>
これで、.blockSection の h5 の高さが固定され、背景画像が 40px になりました。テキストを縦に揃えるには、テキストが 2 行以上に分割されないため、常に行の高さを高さと同じに設定します。しかし問題は、font-face のフォントを使用していて、Firefox や Mac の Safari で縦方向に揃えたくないことです。Windows IE では良さそうです。
ブラウザに異なる行の高さを適用せずに、それを正しくするためのトリックを知っている人はいますか?
ブラウザと OS のさまざまな組み合わせをターゲットにするためのハッキング以外では、運が悪いだけかもしれません。
「すべての Web フォントで同じようにうまく機能する理想的な行の高さはありません。各書体は、そのデザインの品質に応じて、異なるデフォルトの行の高さを必要とします — 凝縮されているか幅が広いか、文字間隔が狭いか緩いか、アセンダーかどうか。ディセンダーは、X ハイトなどに比べて長いか短いです。」- Webfonts.info
Webfonts からフォントのライセンスを取得した場合は、行の高さのオプションをいじることができるキット ビルダーがあります。「境界ボックス」は、私が持っていた 1 つのフォントで機能しました。詳細はこちら: http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder
ブラウザと OS によってフォントのレンダリングが異なる可能性があるため、条件付きスタイルシートよりも優れた別のオプションです。ブラウザと OS の組み合わせを検出してクラスを適用できるようにするこの jQuery プラグインを試すことができます。理想的ではありませんが、オプションです。
http://www.icavia.com/2010/09/solving-font-face-alignment-issues/
更新: 試す別のオプションは、Font Squirrel Webfont Generatorです。問題のフォントを使用する権利がある場合は、このジェネレーターをエキスパート モードで使用し、[Vertical Metrics を修正] オプションがオンになっていることを確認してください。
縦方向のセンタリング (非 IE ブラウザー) の 1 つの解決策はdisplay: table-cell、.vertical-align: middleh5
条件付きコメントでうまくいくようです。1つの行の高さ内にIEのみのスタイルシートを作成し、他のブラウザーの行の高さを使用してメインのスタイルシートを作成します。
ブラウザごとに異なる行の高さを設定したくないことはわかっていますが、IEが希望どおりに動作し、他のブラウザが動作していない場合は、これが最善の解決策です。