CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13
私は最近、vertical-align プロパティを詳しく研究してきましたが、その結果に驚きました。この非常に「上級」の CSS 標準は、実際にはブラウザによって動作が異なります。
vertical-align には、baseline、sub、supper、top、text-top、bottom、text-bottom、middle やさまざまな長さの値 (%、em、ex など) など、かなり多くの値があります。まず、最も誇張されていると思われる値「底値」をお見せしましょう。コードは次のとおりです。
ｐ {
フォントサイズ: 18px;
行の高さ: 36px;
フォントファミリー: Tahoma、サンセリフ;
}
画像 {
垂直方向の位置合わせ: 下 ;
}
それでは、この CSS の効果をさまざまなブラウザで見てみましょう (相対的な位置が明確にわかるように、意図的にこの画像を作成しました)。

まあ、この結果は実はかなり奇妙です。通常、Firefox の方が IE よりも正確に解釈すると思いますが、Opera を調べてみると、IE と同じで、Safari/Win は Firefox 側に立っていることがわかりました。正直に言うと、何が起こっているのか全く分かりません。
私は CSS 決定版ガイド (第 2 版) を注意深く研究し、W3C も参照して、vertical-align に関する図を作成しました。

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

<<: explainコマンドがMySQLデータを変更する理由

>>: JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する