フォントによるはまり

Date:2007/11/02 21:58

IE7のフォントではまったので、そのメモです。

端的に言うと、英文字が出てきたことによる文字の下づけ部分が変わり、それがデザインに影響した、ということです。

ちょっと分かりにくいですが、図で説明します。

上図のようなメニューを作成しました。
ボタンをポイントすると、下に表示される説明文が変化します。

これは「検索」をポイントしたときです。
説明文が変わっていることが分かっていただけると思います。

ただし、図の右下にある「メニュー」という文字の位置は変わっていません。

これが、次の図では変化します。
「HOME」をポイントしたときです。

「メニュー」が下にずれていることが分かってもらえると思います。
実際には「メニュー」を背景（background-image）としているボックスの縦の長さが伸びてしまったのです。

なぜこのようなことが起こるかというと、前述の通り、「HOME」の説明文に英文字（ek-pro）が含まれているためです。
これにより、文字の下づけ（ベースライン）が変わってしまいました。

英語の勉強をしていたときのことを思い出してもらえばわかると思いますが、英字には"y"や"p"のように少し下にはみ出すものがあります。
（英語の練習ノートには、わざわざこのはみ出す分をとってくれているものもあります）

この下付けの位置が、英字のでてきたことによって変化し、上の図のようなことになってしまいました。

この問題はCSSでvertical-alignを明示的に設定することで回避できました。

ただ、問題が起こったのがIE7のみで、FirefoxやIE6では発現していません。
これはIE7のデフォルトフォントによるものです。

あまり考えないvertical-alignですが、頭の片隅に置いておく必要はありそうです。

関連項目：
・vertical-alignの詳しい説明