ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.4005741 スタイルシートでInternet Explorer6のレイアウトが崩れる件
質問者：sikataro Movable Typeで個人的にホームページを作成しております。
ページレイアウトの確認はInternet Explorer7.0とFirefoxで行っており、
レイアウトは特に問題なく表示はしています。
（※細かいずれ等は気にしていません）
がしかし、先日、
Internet Explorer6で確認してみるとサイドメニューがページ（本文などのメイン領域）の下に回り込んでいてレイアウトが大きく崩れているのに気づきました。
修正をしようと検索などで調べ、Internet Explorer6ではスタイルシートでの表示が一部異なるようなので、何度も試してみたのですが、どうしてもうまくいかず、ここに辿りつきました。

必要であればスタイルシートをお教えすることも可能です。
どのように記述すればうまくレイアウトできるでしょうか？
アドバイスをお願い致します。
困り度：
  • 困っています
質問投稿日時：
08/05/08 01:10
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.3 下記のバナーのサイズがW728pxあるのですが、これを挿入する位置が<div id="side">〜</div>よりも前の位置に挿入されている為、その長さに引っ張られてコラム落ちしている様ですね。
----------------------------------------------------------------------
<a href="（省略）"><IMG alt="ANAの旅行サイト　ANA SKY WEB TOUR" border="0" src="​http://www.ana.co.jp/travel/af_banner/728_90atour.jpg"><...​ border="0" width="1" height="1" src="（省略）">
----------------------------------------------------------------------
上記のコードをそのまま
----------------------------------------------------------------------
<address>
（省略）
COPYRIGHT (C) HELLO MOUNTAIN 2007 ALL RIGHT RESERVED.
</address>
----------------------------------------------------------------------
の前に移動してみて下さい。こちらのIE6.0上ではこれで解決しています。
回答者：abril
種類：回答
どんな人：専門家
自信：参考意見
回答日時：
08/05/08 15:53
この回答へのお礼ご回答ありがとうございます。
ご指摘頂いた通りに試したところ無事に解決致しました。
この際、無駄なアフィリエイトバーナーを外しました。
本当に感謝です。
どうも、ありがとうございました。

回答
ANo.2 ANo.1の回答者様と被りますが、やはり原因は#mainと#sideに”float: left;”と"margin-left: 値;"が同時に定義されている事による「マージンの長さが実際の値の二倍になる」というIE6.0の悪名高きバグのせいだと思われます。
（参考）​http://css-happylife.com/log/bug/000339.shtml​

本来、#mainが585px＋6px、#sideが200px＋20pxですから合計しても全体の幅811pxとなり、親要素である#contentsの幅820px内で収まる筈なのですが、IE6.0上ではこのバグのせいで#mainが更にプラス6px／#sideが更にプラス20pxと計算され実際の幅の合計が837pxとなってしまい、#contentsの幅を超えてしまう為、#sideがコラム落ちして#mainの下に回り込んでしまう事になります。

解決方法として手っ取り早いのは、これもANo.1の回答者様と同様なのですが、フロートする#mainと#sideにそれぞれ"display: inline;"を定義してやる、という方法です。ただし、上記の参考サイトにも書かれています通り、この定義を加えることで今度は逆にIE7上での表示に影響を与えしまう場合もある（発生条件は未特定）様ですので、とりあえず試してみてもしもおかしくなる様でしたら、IE6.0用のhack（アンダースコア・ハック等）などでIE6.0のみに"display: inline;"が適用される様にしてみて下さい。
回答者：abril
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/05/08 02:11
この回答への補足ご回答ありがとうございました。
わざわざページのソースまでご確認頂き恐れいります。
（※規約違反で私のHPのURLを削除されました。
こちらの確認不足でスミマセン。）

ANo.1の回答者様の補足にも書かせて頂いたのですが
「display: inline;」を試してもうまくいきませんでした。記述後にIE7でも確認してみたのですが、特に変化がないように見受けられました。実際に「display: inline;」が機能しているか？なところです。
ご教授いただいたIE6.0用のhackを含め、もうすこし、いじってはみますがもし、ご助言がありましたら宜しくお願い致します。
この回答へのお礼無事に解決致しました。
どうも、ありがとうございました。

回答良回答10pt
ANo.1 ゆうめいなIE6のバグの罠にはまっているのでは。

「フロートの左右マージンが指定値より大きくなる」
​http://cssbug.at.infoseek.co.jp/detail/winie/b107.html​

これではじき出されたsideが下に落ちるんじゃないでしょうか。

これの解決方法はいろいろあるのですが、一番手っ取り早いのは、
display:inline;
を使う方法だと個人的には思います。
こちらの記事が参考になるかもしれません。
「IE6でよく遭遇するCSSのバグとその解決方法」の「IE6で、マージンが２倍になってしまうバグ」
​http://coliss.com/articles/build-websites/operation/css/753.html​
回答者：Muller3
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/08 01:51
この回答への補足ご回答ありがとうございました。
教えて頂いたサイトを参考に「display: inline;」を試して見たのですが
どうしてもサイドメニューがページ下にはじかれてしまいます。
私のCSSの記述に問題（あまりにも目茶苦茶な記述）があるかも
しれませんが経過としてご報告させて頂きます。
もうしばらく、調べてみます。
もし、ご助言がありましたら宜しくお願い致します。
この回答へのお礼無事に解決致しました。
どうも、ありがとうございました。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ