mobile safariでのline-height？ #fb

iPhoneなどに搭載されているmobile safariで気づいたことについて。

h4タグなどでタイトルを表示したいたのですが、タイトルが半角英数字のみの場合と
日本語も入っている場合でどうも高さが違うようで。

jquery mobileのグリッドで左右に並べて表示してたのですが、片方が英数字のみ、
片方が日本語も入っている場合、なぜか高さが違ってしまって揃わず、、
それで数時間は悩んでました。。

で、恥ずかしながらMacとiPhoneを接続するとMac側のSafariでWebインスペクターが
使えるということをあとで知り見てみたのですが、最終的なスタイルでheightが確かに
違うんですよね。
14pxで指定して、heightが英数字のみだと18px、日本語入ってると22px。
PCのChromeで確認しながら作成したいたのですが、そのときはちゃんとそろってて、
どちらの場合もChromeだと16pxでした。

というわけで、line-heightを120%ほどに指定してみると、mobile safariでも
揃うようになりました。

Chromeだと問題なかったのですが、ブラウザによったらこんなこともあるのかなぁ、、
という感じですが、、単に僕の経験不足かもという感じもします。。

とりあえず忘れないように、というか忘れても思い出せるように書いてみました。

追記：
MacのSafariやChromeもみてみると、多少違うものの英数字のみと日本語混じりの
場合とで高さが違ってました。
フォントとかの関係でしょうか？
時間もないので深追いはできませんが。。