どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。

Question

ＣＳＳレイアウトで、サイトを作成していたのですが、
最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。

３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。

こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙）

現在のＣＳＳは、

* {
   margin:0;
   padding:0;
}
.wrapper {
   width: 740px;
   margin: 0 auto;  
}
.header {
   width: 740px;
}
.main {
   width: 740
px;     /* 両端ブロックとコンテンツを囲んでいるクラスです。 */
}
.menu {display: inline;
   float: left;
   width: 205px; 
}
.contents {display: inline;
   float: left;
   width: 385px;
}
.affiliate {display: inline;
   float: left;
   width: 150px;
}
.footer {
   clear: both;     
   width: 740px;
}

というような状態です。
どなたかアドバイスいただけますと大変幸いです。

よろしくお願いいたします。

abril · Accepted Answer

HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ（且つ標準準拠モードで）に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ（検証済）。サンプル

コンテンツ（中）

アフィリエイト（右）

幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし… これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね？もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…？とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxあるとすれば、3カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。

abril · Answer

HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ（且つ標準準拠モードで）に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ（検証済）。サンプル

コンテンツ（中）

アフィリエイト（右）

幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし… これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね？もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…？とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxすれば、73カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。

k0021 · Answer

ＩＥ６の環境は、無いですが。ＩＥ５。５とＩＥ７では、問題なく表示しますが最初の指定の、２個は不明ですが

どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。

ＩＥ６の環境は、無いですが。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング