Firefoxでリンク背景色にやられたの巻

p g j k q y

上記に一つ、仲間はずれの文字があります。

それはどれでしょう？

正解は、'k'。

この文字だけは下にハミ出ません。

小学校三年生の時にローマ字を習った覚えがあるが、

（何故英語ではなくローマ字という呼称なのかは不明）

その時の文字の書き取りには、専用のシートを使った覚えがある。

シートと言っても簡易なもので、唯単に水平線がいくつかひいてあるだけのもの。

要は、その線に合わせて文字を書きなさい、と。

で、文字が線より下にハミ出るのはpとかjなのだ。

余談はいいとして、その線の事をベースラインと呼ぶ。

フォントによっては、そのベースラインが上記のように定められていたり、

jとかyの下端に定められていたりする。

今回はそれにやられた。

そのサイトでは、リンクにロールオーバーするとリンクの背景色が変わって下線が出る、と言ったデザイン仕様なのだが、

FirefoxでAタグ（リンク）にロールオーバーすると、IMGの下に余分な高さ分、

リンクにロールオーバーした時の背景色が出てしまう、といった現象。

四苦八苦した末、文字列がベースラインより下に出る分、Aの領域がはみ出ているんじゃないかという推測に到達。

実際に文字列は入ってきていないのに、そんな事されたらたまったもんじゃあない。

最終的にはvertical-alignで、インライン要素を上に持ってきて解決しましたとさ。