スタイルシートで、子要素がフロートするときその親要素の描画領域がおかしくなるのは果たして仕様なのだろうか。例えば上部インデックスのli要素はfloat:left;で処理しているんだけど、これだとul要素の表示領域からはみ出してしまう。というか、ul要素のheightがおかしくなってしまっているようで。GalleryやLibraryとかの段組も同じ方法だけど、枠を表示させてみると表示領域からずれているのが分かる。むぅ。IEエンジンでもOperaでもGecko系でも同様だから、バグというよりは仕様と考えたほうがいいかもしれない。けど親要素のタグで囲んでいるのに、子要素をフロートすると親要素領域から子要素がはみ出るのはおかしいんじゃないのか。フロートしなければ、ちゃんとした親要素の表示領域が確保されるのになぁ。
これだけいってても分かりにくいだろうから、ちょっとスクリーンショットを撮って比較してみる。
li要素のfloatを指定しない
ul要素のpadding-bottomを指定しない
HTML自体はいじってません。floatを指定しないとレイアウトは崩れてますが、しっかりとul要素のbackground-colorが反映されています。対して子要素のliにfloatを指定してpadding-bottomを指定しないと、heightが0になってしまっています。分かりにくいですが、インデックス自体は存在することがわかるかと。つまりli要素がul要素からはみ出してしまっているわけです。borderを指定すると表示領域がよく分かるのですが、この場合heightが0なので見づらいことに変わりなし。
結局現在はpadding-bottomを適当量定義しているわけですが、フォントサイズを変更するとうまく対応できないんです。どうしたものか。
Comment