Re: vertical-align の挙動について

「5」「6」の挙動の違いは、Chrome が正しくて、Firefox/IE がおかしいように見えますが、他の要素やスタイルを排除して、表示に違いが出る部分だけに限った HTML をお作りいただくことは可能ですか？　その方が原因を探りやすい気がします。


On Sep 19, 2014, at 8:54 PM, I N <xtool-html@outlook.com<mailto:xtool-html@outlook.com>> wrote:

いしづです。vertical-align の挙動についての質問です。

【１】
各ブラウザにおいて、テキストのみに適用した場合と、画像のみに適用した場合で
表示位置が異なるのは何故なのでしょうか。
CSS2.1 の仕様を見るかぎりでは、画像のケースのほうが正しいように思えます。


【２】
以下のような指定をした場合
----
<span style="vertical-align: top;">５<span>５</span></span>
<span style="vertical-align: bottom;">６<span>６</span></span>
----
あるいは、
----
<span style="vertical-align: top;">５<img src="../image/i-005.png"/></span>
<span style="vertical-align: bottom;">６<img src="../image/i-006.png"/></span>
----
このとき、Google Chrome や Safari では、
先に出てくる「５」「６」に続く html 要素
（上の例では <span>、<img>）の vertical-align が、
baseline に戻っているように思えます。

他の text-top や super などではそのようなことが起こらないのですが、
どちらが正しい挙動でしょうか。


本日の分科会で提出した資料をお送りします。

・140918-vertical-align.pdf
　　各ブラウザと、EPUB の RS での表示例です。
　　super と sub の位置が微妙に違うものについては、無視してください
　　（CSS2.1 の仕様上、正確な位置が定められていないようなので）。

・140918-vertical-align.epub
　　上記の表示例を作成するために用いたサンプルです。
　　※電書協ガイドの CSS をそのまま利用しています。

・140919-vertical-align-2.epub
　　上記のサンプルから、余計な CSS を省いたサンプルです。
　　text-top/text-bottom と、top/bottom について、
　　それぞれ他と別に確認するための記述を追加しています。

text-top の位置が画像と異なるのは middle の直後にあるからではないか、
という意見がありましたが、試してみたところ、そのようなこともないようです。

<140918-vertical-align.pdf><140918-vertical-align.epub><140919-vertical-align-2.epub>