- ベストアンサー
float+IE8で形が崩れる原因と解決法
- float+IE8で形が崩れる原因と解決法について解説します。
- float+IE8で形が崩れる原因は、IE8のブラウザがCSSのfloatプロパティを正しく解釈できないことです。
- 解決法としては、IE8に対応したCSS hackや別のレイアウト手法を使うことが考えられます。
- makiko3300
- お礼率4% (2/48)
- HTML
- 回答数1
- ありがとう数8
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IE8だけじゃなく、Chrome, Fx3.6, Operaでも崩れるはず。(Chrome4.1は確認しました) IE8の動作が正しく、IE6が間違っています。 > 何故でしょうか？ floatされた要素は高さが0になるからです。 対処法はfloatを解除すれば、きちんと高さを計算してくれます。 clearプロパティは適当なブロックレベル要素に割り当てればいいんですが、もしこの下に要素がなければclearfixという手法を使います。 (全角空白は半角空白にしてください) --------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #Contents{ width:800px; border: solid 1px #993366; /zoom : 1; /* IE6,7のclearfix代替 */ } /* clearfix */ #Contents:after{ content : ''; display : block; clear : both; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } </style> <title>模擬</title> </head> <body> <div id="Contents"> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </div> </body> </html> --------- いまどき ? いまさら ? clear fix のコード | ヨモツネット http://www.yomotsu.net/wp/?p=561
