コピペ元のコードが、UIのベース部分のエレメントをPタグで構築していたのが原因で、 そもそもHTMLは仕様上、Pタグの内部に別のブロックレベル要素を含むことを許可しておらず、Pタグで囲まれた部分にDIVなんかのブロックレベル要素が含まれると、レイアウトが崩れる原因になってしまうらしい。
…というようなことを知らなくて小一時間無駄にした。
PタグのPは、Paragraph(段落)のPであり、もとより段落の区切り(改段)を示す記号に過ぎない。実際、仕様としてはBR(改行)のように単独で、終了タグなしでもちゃんと機能するように作られている。
HTMLのレイアウトエンジンはPタグを見つけると、自身の終了タグではなく、次のブロックレベル要素の区切りを以って、そこを自身(段落)の区切りと勝手に解釈してしまう。従って、Pタグがブロックレベル要素を包含していると、その部分で要素の一意性が途切れてしまう、ということが起きる。
この実装はブラウザレベルでは微妙に違いがあるようで、FirefoxだとJavascriptでinnerHTMLあたりを使用すれば、Pタグの内側にブロックレベル要素を無理やり流し込むことはできる。Chromiumだとそれも無理。つまり、この部分においてはGeckoよりWebkit(Blink?)の方がHTML仕様を正しく実装できている。
それがHTMLの仕様上の正しい動作ということで納得できるし、作業上は別にひとつも困りゃしないんだけどなんかモヤっとするわ。
あと、この記事書くのに色々と試してみて気付いたのだけど、ここ(Blogger)のHTMLエディタは、BRタグもPタグも入力できず、改行コードに置換されてしまう。
contentEditable属性を使用しているWYSIWYG編集部分とHTMLエディタの相互対応の面倒くささ(※ブラウザ標準のデザインモードはPタグを無意味に量産しがち)あたりが理由だと思われるが、正直、意味がわからない。
なんも困ってることないけどモヤっとするわ…。