普段、全くもって気にもしなかったのですが、ある時に、FirefoxとSafari、またまたOperaで表示が異なることに気づきました。
Webサイト作成時に、当然ながらデザインにもよるのですが、下記図のようなデザインをしたい場合があると思います。
画面から見て左が半角と全角のテキスト、右側が半角のみのテキストを横並びにした場合です

上記図は、ごく普通に見出しに文字の色なり、下線を付けるというようなデザインです。テキストは半角と全角の混合です。
ちなみに、HTMLのソースコードは、下記のようになっています。
HTML
<h2>Welcome To CSS Design!!</h2> <h2>What's New!!</h2>
ちなみにCSSは下記のようになっています。
CSS
h2{ font-weight: bold; letter-spacing: 0.1em; border-bottom: 3px solid #ADD8E6; margin: 10px 0 10px 10px; padding-bottom: 5px; color: #8b0000; font-size: 1.6em; float: left; }
また、bodyセレクタに以下のように、font-sizeや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; }
しかし、Verdanaを指定しているせいなのか、未だによく分かりませんが、全角と半角の混合したコンテンツでFirefoxとSafariで表示が異なることに気づきました。
詳細は、下記図で
Firefox3.6.8

Safari4

Safariでは分かりにくいと思いますが、2つの<h2>のborder-bottomの位置がずれているのがおわかりでしょうか?ちなみに、他のブラウザでは下記図のようになっています。
IE8

Google Chrome5

Opera10.60

FirefoxとSafari以外のブラウザでは問題ありません。FirefoxとSafariのバグかどうかはわかりませんが、こういった場合の解決法は下記のようになります。
解決法
解決法は、bodyセレクタ、もしくは、該当するセレクタにline-heightプロパティを指定する
body{ line-height: 1.5em; }
今回の場合は、該当するセレクタが<h2>なので、
h2{ line-height: 1.5em; }
上記のようにline-heightプロパティ(数字は1.5である必要はありません。)を追加します。
Firefox3.6.8

Safari4

上記の指定方法では、Opera以外のブラウザでは解決します。ですが、Operaのみ、条件によりますが、こうしたことにより問題が生じる場合があります。下記図が表示例です。非常にわかりずらいですが、数ミリのずれが生じています。
Opera10.60

その、条件というのは、 フォントサイズです。
検証したのですが、Operaでは、該当するセレクタにline-heightプロパティを指定している場合は、フォントサイズ17px同等以上でずれます。
bodyセレクタにline-heightプロパティを指定している場合は、フォントサイズ18px同等以上でずれます。
そのためか、フォントサイズも大きすぎるのも問題ということになります。ですので、今回のようなデザインの場合は、フォントサイズは16px同等以下にするのが良いということになります。
今回のような、画面から見て左が半角と全角のテキスト、右側が半角のみのテキストを横並びにした場合という稀(?)なケースでの出来事でしたが、Verdanaを指定している時の不都合を知ることができました。また、今回のケースでは、VerdanaとArialの指定を無くすと解決します。
他にも、
- Verdanaを指定しない
- そもそも半角と全角によるもの
などが挙げられます。
今回のようなケースの場合は,Verdanaを指定しなければいいんじゃね?という発想もできますが、どうやら、Verdanaの指定は推奨のようなので、Verdanaを指定しないというわけにはいかないようです。そのため、Operaを対象とするならば,なるべくフォントサイズは16px同等に指定するほうが無難のようです。
また、片方は半角と全角を使ってるのに、片方は半角のみなので、両方に全角と半角を用いるというのが、最も単純で簡単な解決法でもあります。
また今回のエントリで、解決方とえらそうに書いてますが、そもそも、半角と全角の縦と横の比ですので、このような事が出て当然と言えば当然です。Operaが正しく解釈するという証明でもありますね。
それとは別に、何か良い解決法があれば、コメントなどいただけると幸いです。
追記
今回のエントリーで、いろいろと反応をいただき恐縮しています。その中で、@yoruakiさんが、before疑似要素を用いた解決法を提示くださりました。
Vardanaの高さを全角に合わせる | SimpleIsm
「before疑似要素を使う」という発想が凄いです。僕には、思いもつきませんでした。@yoruakiさんありがとうございました。
コメント