- ベストアンサー
ＩＥ６でＣＳＳレイアウトが崩れる問題の解決方法は？
- ＩＥ６でＣＳＳレイアウトが崩れてしまう問題について、解決方法を教えてください。
- 最近ＩＥ６で確認したところ、ＣＳＳレイアウトが崩れまくっています。他のブラウザでは正常に表示されるのに、なぜＩＥ６だけ縦１列になってしまうのでしょうか？
- 試行錯誤してＣＳＳを調整してきましたが、まだ解決できません。どなたかアドバイスをいただけると助かります。
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ（且つ標準準拠モードで）に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ（検証済）。 <!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"> <title>サンプル</title> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body> <!-- wrapper開始 --> <div class="wrapper"> <!-- header開始 --> <div class="header">ヘッダー</div> <!-- header終了 --> <!-- main開始 --> <div class="main"> <!-- menu開始 --> <div class="menu"> <p>メニュー（左）</p> <p>メニュー（左）</p> <p>メニュー（左）</p> </div> <!-- menu終了 --> <!-- contents開始 --> <div class="contents"> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <hr width="600"> </div> <!-- contents終了 --> <!-- affiliate開始 --> <div class="affiliate"> <p>アフィリエイト（右）</p> <p>アフィリエイト（右）</p> </div> <!-- affiliate終了 --> </div> <!-- main終了 --> <!-- footer開始 --> <div class="footer">フッター</div> <!-- footer終了 --> </div> <!-- wrapper終了 --> </body> </html> 幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし… これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね？ もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…？とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxあるとすれば、3カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。 また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。 一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。 それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ（且つ標準準拠モードで）に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ（検証済）。 <!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"> <title>サンプル</title> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body> <!-- wrapper開始 --> <div class="wrapper"> <!-- header開始 --> <div class="header">ヘッダー</div> <!-- header終了 --> <!-- main開始 --> <div class="main"> <!-- menu開始 --> <div class="menu"> <p>メニュー（左）</p> <p>メニュー（左）</p> <p>メニュー（左）</p> </div> <!-- menu終了 --> <!-- contents開始 --> <div class="contents"> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <p>コンテンツ（中）</p> <hr width="600"> </div> <!-- contents終了 --> <!-- affiliate開始 --> <div class="affiliate"> <p>アフィリエイト（右）</p> <p>アフィリエイト（右）</p> </div> <!-- affiliate終了 --> </div> <!-- main終了 --> <!-- footer開始 --> <div class="footer">フッター</div> <!-- footer終了 --> </div> <!-- wrapper終了 --> </body> </html> 幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし… これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね？ もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…？とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxすれば、73カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。 また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。 一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。 それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。
- k0021
- ベストアンサー率26% (32/120)
ＩＥ６の環境は、無いですが。 ＩＥ５。５とＩＥ７では、問題なく表示しますが 最初の指定の、２個は不明ですが <STYLE TYPE="text/css"><!-- .menu { float: left; width: 205px; } .contents { float: left; width: 385px; } .affiliate { float: left; width: 150px; } .footer { width: 740px; } --> </STYLE></HEAD><BODY><DIV class="footer"> <DIV class="menu">第１章 数多い謎<BR>庄屋<BR>同子<BR>庄屋<BR>組頭</DIV> <DIV class="contents">１ 寛文縁起と延享縁起<BR>次左衛門<BR>太郎左衛門</DIV> <DIV class="affiliate">寛文縁起─龍爪権現の独白寛文元年<BR> (1661)<BR>享延頃の<BR>(1740年代)</DIV></DIV></BODY></HTML>
お礼
ご回答ありがとうございます！ １からつくりなおすとなぜか知りませんが、できました。 原因はわかりませんが、変なタグが混入していたのかもしれません。 うまくいきましたので、感謝いたします。