Verdanaを指定すると全角と半角の混合したコンテンツでFirefoxとSafariで表示が異なる

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さんありがとうございました。

Tweet Check