フォント関係は面倒ですね
Verdanaを指定すると全角と半角の混合したコンテンツでFirefoxとSafariで表示が異なる - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介
はてなブックマーク - Layzieのだだ漏れ見聞記 - 2010年7月28日
気になる記事があったので、ブクマしました。
バグかどうかで言うとブコメにも書いたんですが、バグでは無いのかなあと思ってます。
DTPとかでも役物関係で高さが変わるとか詰めが変わるとかってのも良く聞きますしね。
Verdanaが英字フォントなので、例で言うと全角のエクスクラメーションマークのみが
日本語のフォント(メイリオとかヒラギノとか)に変わってるんで、高さが合わなくなるんだと
思います。x-heightが違うのでしょうがないんじゃないかな。
ブログ主さんはline-heightを指定してますけども、日本語のhtmlなら、いっその事Verdanaの
フォントセット中の順位を下げてしまうというのもアリな気がしますが、いかがでしょうか。
ラテン文字も日本語フォントにまかせてしまうという形に。
具体的にはbodyに指定してるfont-familyの中を
body { font-size: 62.5%; font-family: Verdana,Arial,Meiryo,"メイリオ",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,MS P Gothic,"MS P ゴシック",sans-serif; }
これから
body { font-size: 62.5%; font-family: Meiryo,"メイリオ",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,MS P Gothic,"MS P ゴシック",Verdana,Arial,sans-serif; }
これにしちゃえばOperaでもズレが無いと思います。ご一考を。根本的な解決じゃないけど。
Macで最初の状態だとこんな感じでした。なぜか、Fxはずれが無い。謎。誰か偉い方教えて下さい…。Verは面倒なんで書いてませんが、全部Macの最新版です。
- Safari 4
font-familyのフォントセット変えたら以下になります。
- Safari 4
あと、ブコメで書いた"Verdanaが推奨されている"というのは俺もググっただけなんで一次情報にあたってません。すいません…。今度時間あれば調べます。多分、英語圏の話だと思うんですけどもね。