インラインフレームを使用するとIE6でレイアウトが崩れる問題の解決方法

2010/08/25 18:52

このQ&Aのポイント

インラインフレームを使用した2カラムのwebページで、IE6においてレイアウトが崩れる問題が発生しています。
IE6でインラインフレームを使用すると、メニューが回り込まず、コンテンツが崩れる現象が起こっています。
インラインフレームを削除しても問題は解決せず、CSSやHTMLの修正を試みたが効果がなかったため、原因がわかりません。アドバイスをお願いします。

インラインフレームを使用するとIE6でレイアウトが崩れます。

インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> 　・　・　・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> </div> 　・　・　・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ boxのなかにmain（右回り込み）とmenu（左回り込み）で２カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv（下記#contents）を切りテキストのページをつくった場合はきれいに回り込みます。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> 　・　・　・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキストテキスト </div> <div id="menu"> メニュー </div> 　・　・　・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしてもカラム落ち？は直らないという謎の状況です・・・他のサイトを同じようなCSSで作ったときには、インラインフレームを使用してもIE6で問題なく表示されたので今回のエラー？　バグ？　がなぜおこっているのか見当もつきません。状況を上手く説明出来てないかもしれませんが、アドバイス等ありましたらお願いします。

yunomi-_-
お礼率100% (2/2)

その他([技術者向] コンピューター)
回答数2
ありがとう数3

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

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

ベストアンサー

John_Papa
ベストアンサー率61% (1186/1936)

2010/08/25 22:07 回答No.2

IE6が腐ったミルクなのはセキュリティ面での話ですが、 WEBデザイナーに嫌われるのは、セキュリティ面ではなく IE6(IE5.5)のバグとか称していますが、明らかに普及率を盾に取ったWWWへの挑戦でした。マージンやボーダーの解釈が、ことごとくW3C標準に違反しています。しかもモードによりマージンが指定数値と違うというバグ付きで。あなたのコーデックでは、IE6のみ各ボックスタグの幅が広くなりwidth:800px;に収まりません。 margin/border解釈の違い図示→http://adp.daa.jp/archives/000265.html IE6をサポートするのでしたらIE6用に別ファイルにCSSを作成し、 <link rel="stylesheet" type="text/css" href="all.css">  で、対応しましょう。 http://allabout.co.jp/gm/gc/23921/

質問者

お礼 2010/08/26 10:42

サイトに設置したアクセス解析の結果、IE6の利用率が思いのほか高く多くのユーザーの目に触れるものがレイアウト崩れを起こしているのは恥ずかしい？　と思い IE6への対応に頭を悩ませていましたが、その考え自体時代錯誤なのだなあと気づきました・・・ IE6でwidthの解釈がおかしいと言うことは知っていましたが、詳細を知ることが出来て嬉しく思います。参考URLをありがとうございました。ソースの頭に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> を入れていたのですがIE6で上手く表示出来ず CSSでもスターハックを試してみたのですがかえってCSSが混沌としてしまいました。今後はIE6用のCSSを用意して振り分けを試みつつ、ブラウザのバージョンアップや他のブラウザへの以降を促すメッセージも表示して対応したいと思います。回答ありがとうございました。

その他の回答 (1)

123admin
ベストアンサー率52% (1165/2221)

2010/08/25 20:13 回答No.1

MSが腐ったミルクと揶揄するIE６をサポートするのは今後は有害サイトとの誹りを受け兼ねない行為ですね。「IE6は9年前の腐った牛乳」??Microsoftがアップグレード呼び掛け http://www.itmedia.co.jp/news/articles/1005/17/news033.html 参考　WEB開発者の喜び http://quarter4.info/webinfo/good-by-ie6.html まぁIE７、８以前のIEはサポートしないのが吉です。

質問者

お礼 2010/08/26 10:25

サイトのアクセス解析でのIE6の利用率から考えたらIE6も無視出来ないのかなあと思い、 IE6でもきれいに表示出来るようにといままで苦心してきましたがある程度切り捨てても良いのかなあと思い直しました。ブラウザのアップグレード、他のブラウザへの以降を促すメッセージを表示するのもひとつの手段なのですね。考えもしませんでした・・・ IE6以下を完全に無視するのではなく、他のブラウザへ移行するよう呼びかけつつ、控えていたCSSを使って自由にデザイン、制作していきたいと思います。回答ありがとうございました。