inline-blockをネストすると表示がずれる
DIVタグをベタベタならべて、あとはcssでサイズや属性を指定してページをレイアウトしようとしています。しかし、inline-block指定をネストすると表示が急にずれることに気づきました。
まず3つのdivタグを並べます。inline-blockを指定することで横に並べます。
例えば次のようなものです。
■■■▲▲▲●●●
■■■▲▲▲●●●
■■■▲▲▲●●●
後の説明の都合上、3×3の大きさで描いていますが、■/▲/●がそれぞれ一つのDIVに対応していて
<DIV id="■"></DIV>
<DIV id="▲"></DIV>
<DIV id="●"></DIV>
となっていて、cssで適当なサイズが指定されていると考えてください。
ここで、▲を縦に3つに分けるために、<DIV id="▲"></DIV>のなかにネストしたDIVタグを3つ挿入します。
<DIV id="■"></DIV>
<DIV id="▲">
<DIV id="□"></DIV>
<DIV id="△"></DIV>
<DIV id="○"></DIV>
</DIV>
<DIV id="●"></DIV>
■■■□□□●●●
■■■△△△●●●
■■■○○○●●●
このように▲の中に□/△/○の3つのdivを置いて分割します。縦に並べるため、今度は□/△/○にinline-blockを指定していません。
更にこの△の部分を、今度は横に3分割することを考えます。つまり、<DIV id="△"></DIV>の中に
<DIV id="◆"></DIV><DIV id="◇"></DIV><DIV id="▼"></DIV>
を挿入します。今度は横並びにしたいので、◆/◇/▼はcssファイルでinline-blockを指定します。
期待している表示は、
■■■□□□●●●
■■■◆◇▼●●●
■■■○○○●●●
なのですが、実際には
■■■___●●●
■■■□□□●●●
■■■◆◇▼●●●
___○○○___
(___は空白)
のように真ん中のDIVが下にずれて表示されてしまいます。
試行錯誤した結果、どうやら外側のinline-blockの底辺と、内側のinline-blockの底辺とを一致させようとするロジックが働いているように見えます。
この現象はchrome/firefox/safariのいずれでも同じでした。
ということは、この動作はhtml/cssで規定されている動作でしょうか?
それとも、たまたますべてのブラウザで同じような実装上の不具合がある、と考えるべきでしょうか?
ちょっと分かりにくいかも知れませんが、ご存じの方、コメントをよろしくお願いします。
お礼
ありがとうございます。