垂直配置属性の詳細な分析

ここ数日、vertical-align 属性を詳しく調べた結果、この非常に「上級」の CSS 標準がさまざまなブラウザで異なる動作をすることに驚きました。
垂直方向の配置には、ベースライン、サブ、夕食、トップ、テキスト、トップ、ボトム、テキスト、ボトム、ミドル、およびさまざまな長さの値（%、em、ex など）を含む多くの値があります。まず、最も誇張されていると思われる値、つまり「底」を示します。コードは次のとおりです。


次に、さまざまなブラウザーでこの CSS の効果を見てみましょう (相対的な位置が明確にわかるように、画像は意図的にそのように作られています)。


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


W3C の定義によれば、インライン要素の垂直方向の配置が次のように設定されている場合、

1. ベースライン、上部、下部を使用する場合、要素のベースライン (または中央、上部、下部) は、画像の上部や周囲のテキストの上部など、周囲の要素の同じ位置に揃えられます。
2. text-top および text-bottom を使用すると、要素の上部 (または下部) が周囲の要素の text-top (または text-bottom) に揃えられます。
3. 長さ (%、em、ex) はベースラインに基づいて上に移動されるため、正の数値は上に、負の数値は下に移動します。
4. 中央にある場合、要素の中心は周囲の要素の中心と位置合わせされます。ここでの「中心」の定義は次のとおりです。画像はもちろん高さの半分であり、テキストは小文字「x」の正確な中心であるベースラインに基づいて 0.5ex 上に移動する必要があります。ただし、多くのブラウザでは ex の単位を 0.5em として定義していることが多いため、必ずしも x の正確な中心であるとは限りません (たとえば、上の図では、x の高さは 10 ピクセルである必要があり、em は 18 ピクセルであるため、この 2 つは値が異なります）。

しかし、上記のガイドラインに従っているとしても、ブラウザーによって物事の解釈がこれほど異なることに私は困惑しています。なぜそうなるのか調べるのが面倒です。一般的に言えば、フォントの各行の位置の定義が異なるはずです。そのため、この問題は垂直方向の配置だけでなく、ブラウザによるインライン テキストとインライン イメージの構造の解釈にも関係します。それと大いに関係があります。