AdobeのSpryというJavaScriptライブラリがあるのだが、このなかのMenuBarのCSSが非常に不気味だ。
不気味とはいってもソースコードから得体の知れないものが浮き上がるとかそんな手の込んだものではなく、レイアウト的に気持ちが悪い。
MenuBarの実体は単なる順不同リストで、li要素をdisplay:boxとしてfloat:leftさせることで幅固定の横並びを実現している。
しかしながら、この方法だと以下の問題が生じる。
・ulの直接の子要素がすべてfloat:leftかposition:absouteで配置されているため、ulの高さが計算できず0pxとして扱われる。
・float:leftがclearされていないため、下に置いた要素がinlineならば改行されず、clearしたboxならばulの本来の領域まで含まれるため内部の配置がずれる。
以下に再現を示す。
背景色yellowのdivのなかに背景色redのul、背景色greenのp、背景色blueのdivがある（嘘は言っていない）。
firebugやIEDTでulの高さが0であることを確認して欲しい。
どこに配置されるかわからないコンポーネントでこのような問題が起きるのはかなり痛い。
せめてclearされるbr要素をスクリプトで挿入するくらいの配慮は欲しいものだ。