普段、全くもって気にもしなかったのですが、ある時に、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","ＭＳ Ｐゴシック",
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さんありがとうございました。
コメント