4

次のような CSS を想像してください。

.x {
  background: blue none;
  border-radius: 6px;
}

と HTML のような:

<div>Words and <span class="x">decorated</span> words</div>

「装飾」を読み取るスパンの高さは、ブラウザーが異なれば、また同じブラウザーを実行している OS が異なれば、大きく異なります。

同じ高さにする方法はありますか？

(インラインブロックに移行したり、まったく同じベースラインを使用してテキストを犠牲にしたりしたくありません。)

4

2 に答える 2

1

異なる高さを回避した私の経験は、正確な行の高さとフォントサイズを設定することです

于 2012-05-06T00:32:41.700 に答える
0

あなたの問題を引き起こしている何か他のものがあるように聞こえます。質問のスニペットを使用して基本的な html5 ドキュメントを試し、Windows での配置を Chrome、Safari、FF、IE と比較しました。スパンの上に 1 ピクセルのギャップしかない IE9 を除いて、それらはすべてまったく同じようにレンダリングされました。

確かに、Mac は Windows とは異なる方法でフォントをレンダリングします。Linux や Mac ではテストしていませんが、9px です!!!??? ここに私が調査するいくつかのことがあります：

大規模なプロジェクトで作業している場合は、最初に基本的なテスト ファイルを試してください。これにより、変数が制限されます。

次に、明示的なフォントを設定し、それらがすべてのテスト マシンに存在することを確認します。Linux が別のフォントにフォールバックしている可能性があります。

第三に、ズームインしていないか、どのブラウザーでもカスタム フォント サイズのブラウザー設定を使用していないことを確認してください (私は、IE が 105% ズームに設定されていたときに、この問題に遭遇しました)。

最後に、すべてが失敗した場合は、Web フォント (@font-face) を使用して、より厳密にレンダリングされるかどうかを確認してください。

編集：

コメントの新しい情報の代わりに、JavaScript を使用して一部の画面外要素のレンダリングされた高さを検査し、それに応じてプログラムでスタイルを調整するという別の戦略があります。おそらく巨大な FOUC が得られますが、ホワイトアウト div を使用してシフトを最小限に抑えることができます。

于 2012-05-09T22:50:42.210 に答える