フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし、フロントエンドの開発プロセス中に、単一の（チェック）ボックスとその背後のプロンプトテキストを設定なしでは揃えることができず、Firefox と IE の間に大きな違いがあることが判明しました。 vertical-align: middle を設定しても、完全に揃えることはできません。次の図に示すように:

そこで、オンラインでいくつかの Web サイトを調べたところ、次の図 (FF3.5) に示すように、この問題はよくあることがわかりました。

フォーム ページを含む多くの Web サイトでは、フォーム要素とプロンプト テキストを揃えることができないという問題があります。そこで私はこの問題を研究することにしました。まず、wheatlee の記事「vertical-align についてはそれぞれ意見がある」を検索しました。ウィートリー氏は記事の中で、垂直方向のセンタリングに関するいくつかの重要な点について言及しています。

1. vertical-align: middle を使用すると、要素の中心が周囲の要素の中心に揃えられます。

2. ここでの「中心」の定義は、画像の高さが当然半分で、テキストはベースラインから 0.5ex 上、つまり小文字の「x」の中心にある必要があるということです。ただし、多くのブラウザでは ex 単位を 0.5em と定義しているため、必ずしも x の正確な中心とは限りません (ベースラインなどの用語がわからない場合は、まず wheatlee の記事を読んでください)

この考え方に沿って、私が遭遇した問題と比較すると、最初に思い浮かんだのは、ブラウザが「チェックボックス」と画像をレンダリングするために同じルールを使用しているかどうか（チェックボックスを正方形の画像として扱っているかどうか）を確認することでした。次のコードを記述します。

<スタイル>
本文{フォントサイズ:12px;}
</スタイル>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
テストテキスト

コード内の testpic.gif は、チェック ボックスとまったく同じサイズの黒い画像です。 FF3.5での表示は次のようになります。