4

問題：

H2要素を使用する場合に最もよく説明されます。この要素の高さがデザインの鍵となる場合、大きな問題に直面します。複数のデバイスで高さが異なるため、デザインが台無しになる可能性があります。

これを下の画像に示します。疑問符の横にある黒いスペースは、モバイル サファリに表示された不要な「余分なスペース」を示しています。

ここに画像の説明を入力

自分で試してみてください

自分でテストできる方法を見つけました。異なるデバイスでこのリンクを開くだけで、まったく同じコード スニペットで実際の高さが異なることがわかります。

http://jsfiddle.net/RwPk7/40/

リサーチ

 - MAC Chrome  : 18px 
 - MAC Safari  : 18px
 - MAC Firefox : 17px
 - iPad        : 20px
 - iPhone      : 20px
 - Android     : 19px
 - WIN Chrome  : 18px
 - WIN IE      : 18px

可能な答え

font-size: 13px; 
line-height: 1.231; // Borrowed from HTML5 Boilerplate

http://jsfiddle.net/RwPk7/45/

4

1 に答える 1

-1

Mobile Safari での太字テキストの実装方法の問題のようです。これは、太字のテキストなしで両方のブラウザーで機能するようです: http://jsfiddle.net/RwPk7/23/

ただし、太字のテキストはそれぞれ異なる高さでレンダリングされます。これは、ブラウザがデフォルトでテキストを行の高さに対して垂直方向に中央揃えにするという事実と相まって、シンプルで普遍的なソリューションを困難にしています.

したがって、太字のテキストがなくても生活できるのであれば、これで問題ありません。

于 2012-09-04T15:44:19.340 に答える