Phantasy Garden

スタイルシートで、子要素がフロートするときその親要素の描画領域がおかしくなるのは果たして仕様なのだろうか。例えば上部インデックスの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

名前:

機械的スパムを防止するための検証です。以下の画像に書かれている文字列(半角英数字)を入力してください。
Captcha Image
認証:

Information

About this website

サイト名『空想庭園』。御巫 悠が自由気ままに運営しているサイトです。役に立たないコラム書きがメインなのかもしれません。

本サイトはクリエイティブ・コモンズ表示4.0 国際ライセンスの下に提供されています。

Recent Weblog

Recent Comment

Weblog Search

Weblog Category

Friend Links