CSSリスト外枠から文字と画像がはみ出るclearfix

2009/01/19 17:00

このQ&Aのポイント

CSSのclearfixを使って、リストと画像がはみ出る問題を解決する方法について質問しています。
質問者は、リストと画像が表示されるボックスに1pxの外枠を追加したいが、上の行までしか外枠が表示されないという問題に直面しています。
HTMLとCSSのコードが提供されており、何が間違っているのか、また解決策としてCSSのclearfixをどのように使えば良いのか尋ねています。

hitujiguma
お礼率85% (24/28)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/01/20 00:19 回答No.2

≫widthは固定ですが、heightは可変にしたいです。これは超難題だ!! 　枠さえ引かなくてよいなら、absoluteで配置すればすむのだが、IEには、XHTML(お示しのソースはXHTML)だと、floatとclearにはさまれたabsoluteで指定されたブロックを抹消する致命的なバグがあって・・。まったく画面から消えるので手の打ちようがない。　また、内容領域をCSSの仕様書とは異なる解釈をする唯一のブラウザで、firefox,Opera,safariでは、まったく問題ないスタイルシートがIEでは使えない。　ただ、横幅固定なら、ユーザーエージェントは限定されるのですが、デザイン自体は楽です。 1) 幅を固定したブロック要素をfloatで配置する。　★内部にabsoluteブロックを置かない(IEのバグ対策) 2) 区切り線<hr />をclearのためにブロック内に置く　★これは、visibility:hiddenで隠す。　★これまたIEのバグでhrの高さ(マージン)が小さくならないけどしようがない [HTML修正部分] ☆ imgはinline要素で<div>内にはそのまま書けるのだが、意味的にも、またCSS出のデザインのためにも必要なため<p></p>で括る ☆リストの画像は「デザインのための画像」で文書構造と指定の意味は持たないためスタイルシート側で記述する。 [注意] ☆これまたIEの対策だが、リストの目印の位置やマージンやパディングがCSSの仕様とは異なるため、具体的に指定しておく必要がある。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>タイトル</title> <style type="text/css">  </style> </head> <body> <h1>title</h1> <div class="box"> <p> <img src="Sample.jpg" width="180" height="133" alt="**の写真" /> </p> <ul> <li> 1111</li> <li> 2222</li> <li> 3333</li> </ul> <ul> <li> 4444</li> <li> 5555</li> <li> 6666</li> </ul> <ul> <li> 7777</li> <li> 8888</li> <li> 9999</li> </ul> <hr /> </div> </body> </html>

質問者

お礼 2009/01/20 15:43

わかりやすい説明をありがとうございます。 <hr />をclearに使う方法やバグの事など、質問内容以上の詳しい回答をしていただいて大変感謝しております。とても勉強になりました。貴重なお時間をさいてのご回答、本当にありがとうございました＾＾

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/01/19 17:48 回答No.1

私は原則としてfloatは使いません。ブラウザによって解釈が違うことが多い（特に多数派のIE一つが足を引っ張る)ことと、floatさせる要素は、そのボックスの内容の高さに反映されないからです。　あなたの場合、上のborderしか表示されないのではなく、内容の高さがゼロだから高さもゼロになるからです。　解決方法をアドバイスしたいとは思いますが、追加情報をください。　このブロックは、固定幅なのか可変なのかと、その場合のサイズ　画像の大きさは一定なのか？　リストのテキスト幅は？　テキストの行数と画像の高さ　　たとえばユーザーが文字を拡大したときには？　など、　

質問者