CSS標準：縦揃え属性_HTML/Xhtml_Webページ制作

原文: http://www.mikkolee.com/13
私はここ数日間、vertical-align 属性を注意深く研究しましたが、この非常に「上級」の CSS 標準がさまざまなブラウザーで実際に異なる動作をするという結果に驚きました。
垂直配置には、ベースライン、サブ、夕食、トップ、テキスト、トップ、ボトム、テキスト、ボトム、ミドル、およびさまざまな長さの値 (%、em、ex など) を含む多くの値があります。まず、最も誇張されていると思われる値、つまり「底」を示します。コードは次のとおりです。
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma、sans-serif;
}
img {
垂直配置: 下 ;
}
それでは、さまざまなブラウザーでのこの CSS の効果を見てみましょう (相対位置が明確にわかるように、意図的にそのような図を作成しました)。





まあ、この結果は実際には非常に驚くべきことですが、一般的には IE よりも Firefox の方が正確に説明できると思いますが、Opera を調べてみると、Safari/Win は IE と同じであることがわかりました。 Firefoxの側面。正直に言うと、何が起こっているのか分かりません。
私は「CSS Definitive Guide (Second Edition)」を注意深く研究し、W3C にも相談して、自分で垂直方向の配置に関する図を作成しました。

W3C の定義によれば、インライン要素の垂直方向の配置が次のように設定されている場合: ベースライン、上端、下端を使用すると、要素のベースライン (または中央、上端、下端) が周囲の要素の同じ位置に揃えられます。たとえば、図の上端が周囲のテキストの上端に揃えられるようになります。 text-top と text-bottom を使用すると、要素の上部 (または下部) が周囲の要素の text-top (または text-bottom) と位置合わせされます。 長さ (%、em、ex) はベースラインに基づいて上に移動されるため、正の数値は上に、負の数値は下に移動します。 中央にある場合、要素の中心は周囲の要素の中心と位置合わせされます。ここでの「中心」の定義は次のとおりです。画像はもちろん高さの半分であり、テキストはベースラインに基づいて 0.5ex 上に移動する必要があります。つまり、小文字 "x" の正確な中心。ただし、多くのブラウザでは ex の単位を 0.5em として定義していることが多いため、必ずしも x の正確な中心であるとは限りません (たとえば、上の図では、x の高さは 10 ピクセルである必要があり、em は 18 ピクセルであるため、この 2 つは値が異なります）。
しかし、上記のガイドラインに従っていたとしても、各ブラウザーの解釈が大きく異なることに私は困惑しています。なぜそうなるのか調べるのが面倒です。一般的に言えば、フォントの各行の位置の定義が異なるはずです。そのため、この問題は垂直方向の配置だけでなく、ブラウザによるインライン テキストとインライン イメージの構造の解釈にも関係します。それとたくさんの関係があります。
最後に、各ブラウザがvertical-alignの異なる値をどのように解釈するかを確認するためのテストページを提供します。
http://www.mikkolee.com/weblab/001_vertical/
各ブラウザは完全に異なるため、middle や text-top などの他の値をテストできます。あなたの考えを話し合いましょう~~