フォーム要素とプロンプトテキストが整列できない問題_HTML/Xhtml

フォームを含む多くの Web サイトページでは、フォーム要素とプロンプトテキストを揃えることができないという問題があります。そこで私はこの問題を研究することにしました。

最近のプロジェクトには、多くのフォーム、特にチェックボックスとラジオの作成が含まれています。しかし、フロントエンドの開発過程で、単一（複数）のチェックボックスとその背後にあるプロンプトテキストを何も設定しないと位置合わせできないことが判明し、FirefoxとIEには大きな違いがあることが判明しました。たとえvertical-align:middleが設定されていても、完全に整列するわけではありません。下の図に示すように:

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

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

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

2. ここでの「中心」の定義は次のとおりです。画像はもちろん高さの半分であり、テキストはベースラインに基づいて 0.5ex 上に移動する必要があります。ベースラインは小文字の「」の正確な中心です。 ×」。ただし、多くのブラウザでは ex の単位を 0.5em として定義していることが多いため、必ずしも ex の中心が正確に一致するとは限りません。問題が発生したとき、私が最初に考えたのは、ブラウザが「チェックボックス」のレンダリングに同じルールを使用しているかどうかを確認することでした。 " と画像 (チェックボックスを正方形の画像として処理したかどうか)。そこで私は次のコードを書きました:

テストテキスト

<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 での表示は以下の通りです:

FF3.5 は垂直方向に問題があることが判明チェックボックスとピクチャの配置は同じルールを使用してレンダリングされます。つまり、チェックボックスは正方形のピクチャとして扱われます (IE はそうではありません)。 Wheatlee さんの「真ん中のときは要素の中心が周囲の要素の中心に揃う」という観点から、チェックボックスの後に英字を入力すると、チェックボックスの中心と周囲の要素の中心が一致します。英語の小文字のx。テストした結果、FF3.5 は基本的に次のようになります (フォントサイズによっては一定の誤差が生じます。たとえば、フォントの高さが偶数の場合、中心点が一般的な点より 1 ピクセル上になる場合もあれば、一般的な点より 1 ピクセル下になる場合もあります)。半分）。図に示すように:

しかし、これは中国人にとって良い結果ではありません。中国語は正方形のフォントであり、同じフォントサイズの場合、高さは小文字の x よりもはるかに高くなります。したがって、ブラウザの組み込みメソッドによれば、vertical-align:middle を使用するだけでは、いかなる場合でも中国語を整列させることができません (中国語だけを書く場合、中国語を最初に書く場合、英語を最初に書く場合、FF3.5 は小文字の x 中央に基づいています)整列させる方法）。しかし、wheatlee氏の記事を振り返ってみると、この小文字×中央揃えのレンダリング方法は「テキスト」向けだという。では、それが言葉ではなかったらどうなるでしょうか…？チェックボックスの後にラベルなどのインライン要素が続き、その中にテキストが書かれている場合はどうなるでしょうか?ブラウザはこのインライン要素を「ブロック」とみなして、画像と同様のルールに従ってレンダリングするのでしょうか?そうであれば、私たちは目標を達成したことになります。

しかし、テストした結果、残念ながら、ラベルを追加する場合と追加しない場合に違いはありません。 FF3.5/IE6/IE7も同様です。 FF3.5 の firebug を使用して、ブラウザがラベルの高さの値に従って中心点を揃えないことを証明します。図に示すように:

前の仮定に従えば、赤と青の線は重なるはずです。しかし現状では1pxも違うのです。そしてこの1pxはフォントサイズが大きくなると不規則になるため、対応関係を抽出するのは容易ではないようです。そこで、ラベルにvertical-align:middleを再度追加してみようと思いました。結果は以下のようになります:

FF3.5 と IE7 では、必要な状態に非常に近く、わずか 1px が欠けています。 IE6では…絶句です。

上記の議論の後、私は wheelee と同じ結論に達しました。つまり、さまざまなブラウザがこの問題を処理する方法にはパターンがないようです。さらに、すべてのブラウザのvertical-align:middleのレンダリングは、W3Cの「ボックスの垂直方向の中点を、親ボックスのベースラインに親ボックスのx高さの半分を加えたものに揃える」という規定に完全には準拠していないようです。 🎜>
しかし、注意深く要約して分析した結果、最終的な配置結果はラベルの高さと現在のフォントの小文字 x の中心点に関連しているようです。両方ともレンダリング結果に同時に影響します。時間（なぜそうなるのかはわかりませんが））。さて、現在の状況が望ましい状態に非常に近づいたので、フォントの設定によって小文字の x の中心点の位置を変更し、垂直方向の配置結果を「微調整」することは可能でしょうか。

継続的なテストの結果、最終的に、font-family の最初のフォントを Tahoma に設定すると、位置合わせが完全に達成できることがわかりました (Verdana などのフォントも使用できます)。 FF3.5/IE6/IE7/IE8およびChromeでは正常に表示されます。最終的なコードは次のとおりです。

ヒント:

最終効果:

この時点で、チェックボックスとプロンプトテキストの位置合わせの問題は解決されました。しかし、他のフォーム要素はどうでしょうか?ラジオボタンをテストしたところ、まだ問題があることがわかりました。プロンプトテキストはまだ上向きです。 firebug で確認したところ、ラジオ要素にはデフォルトで左マージンが 5 ピクセル、上下マージンが 3 ピクセルありますが、下マージンがないことがわかりました。写真に示すように:

そこで、ラジオの余白を削除してみましたが、表示は正常でしたリフレッシュした後。 (実際には、チェックボックスにも余白がありますが、その余白は 4 方向で等しいため、垂直方向の配置には影響しません。) 次の図は、一般的に使用されるいくつかのフォーム要素の最終的な表示効果と最終的なコードです。さまざまなブラウザを使用して実際の効果を確認できます (注: デモで使用されている 12 ピクセルの中国語テキストは実際には高さ 11 ピクセルしかありませんが、IE でのテキストボックスやその他の要素の高さは 22 ピクセルであるため、一方は奇数であり、もう一方は奇数です)は偶数なので、これらの部分は IE にあります。テキストボックスの高さが手動で奇数に制御されている場合、またはテキストが偶数の高さに設定されている場合、中央が揃っていません。表示は正常になります):

ヒント: 変更できます

を実行する前のコードの一部です。そして、中国語の問題が解決されただけでなく、プロンプト情報が他の言語に変更された場合にも解決されることがわかりました。 , 基本的には揃えることができますが、少なくとも最初のように大きくずれることはありません。以下にスクリーンショット、コード、およびいくつかの例を示します: