フォーム要素とプロンプトテキストの位置がずれる問題

最近のプロジェクトでは、特にチェックボックスやラジオボックスなど、フォームを作成することが多くなっています。しかし、フロントエンドの開発工程で、シングル（チェック）ボックスとその後ろのプロンプトテキストが何も設定しなくても揃わないことがあり、FirefoxとIEではその差が非常に大きいことがわかりました。vertical-align:middleを設定しても、まだ完全に揃えることはできません。以下の画像のように。

そこで、ネットでいくつかのサイトを調べてみたところ、以下のようにこの問題はよくあることだとわかりました（FF3.5）。

このフォーム要素とヒントテキストが揃わない問題は、Webサイトのフォームを含む多くのページで存在します。そこで、この問題を調べてみることにしました。まず、Wheatleeの記事、 "Everyone's got something to say about vertical-align" を探しましたが、その中でWheatleeは、垂直方向の中央揃えについて以下の重要なポイントに言及しています。

1. vertical-align:middleの場合、要素の中心は周囲の要素の中心に揃う。

2. ここでの "center" の定義は、画像はもちろん高さの半分、テキストはベースラインが小文字の "x" の中心である 0.5ex だけ上に移動したものを基準とすることです。ただ、多くのブラウザはexの単位を0.5emと定義する傾向があるので、必ずしもxの中心とは限りません（ベースラインなどの用語がわからない場合は、まずwheatleeさんの記事を読んでみてください）。

この線に沿って、私が最初に考えたことは、ブラウザがチェックボックスと画像のレンダリングに、私が抱えている問題と同じルール（チェックボックスを正方形の画像として扱う）を使っているかどうかを検証することでした。そこで、次のようなコードを書きました。

<スパン <style>
body{font-size:12px;}。
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
テストテキスト

コード中のtestpic.gifはチェックボックスと全く同じサイズの黒い画像で、FF3.5では以下のように表示されます。