- ベストアンサー
Internet Explorer 6、7のレイアウト崩れ
Internet Explorer 6、7のレイアウト崩れ Webを制作し、FireFox3.6とInternet Explorer8で確認しながら作業をしておりました。 友人達に確認してもらったところ、Internet Explorer 6、7ではメニューのレイアウトが崩れているとのことでした。 menu.cssにある#header関連が原因のようです。 どうすればInternet Explorer 6、7にも綺麗に表示できるのでしょうか？ http://team-aoyama.lolipop.jp/ アドバイスをお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2さんの対処策にプラスで、 ul#navにwidthを追加すればIE6でも表示できるはず。 ul#nav { width:840px; margin:0; padding:0; float:none; clear:both; position:relative; top:3px; z-index:1; }
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
#1さん言われている通り、headerを900pxにしていることがそもそも問題です。 以下の通りCSSを修正すれば問題ないのではないでしょうか？ (ポイントのみ修正) #header { width:840px;/* 900→840px */ margin:auto; position: relative; /*left: -40px; ←削除*/ } ul#nav { margin:0; padding:0;/* ←追加 */ float:none; clear:both; position:relative; top:3px; z-index:1; }
補足
返答をありがとうございます。 修正しましたら、IE7では対応できましたが、IE6ではメニューが消えてしまいます。 IE6用のindex.htmlを制作し、名称をindex_ie6.htmlと名付け、javaScriptかCSSでブラウザを判断し、IE6なら自動的にindex_ie6.htmlにジャンプする方法がいいと思うのですが、その方法を探しているのですが、なかなか見つかりません…ある様に思えるのですが、ないのでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
なんか、IE8でも表示しようとすると、エラーがでてますけど.... 関係ないけど<html style="">は、よしましょう。 レイアウト崩れ ＝＝＞意図がわからんけど、 width 840pxにセットした#containerの中に設置したメニュ－部 #header { left:-40px; margin-bottom:auto; margin-left:auto; margin-right:auto; margin-top:auto; position:relative; width:900px; } のwidth:、left:、position： の値の目的は？
補足
返答をありがとうございます。 修正後、IE7はうまく表示できてもIE8やFireFox、Chromeは逆にレイアウトが崩れてしまいます。 IE７の場合は#header 内のleft:-40px;を削除すればうまく収まりますが、IE8などは崩れます。 「特定のバージョンでのみ読み込ませたいCSSのスタイル定義ファイルをリンクする」の記事を参考に作成しました。 http://www.marguerite.jp/Nihongo/WWW/CSS/ForIE.html#TIPS #header { width:900px; margin:auto; position: relative; margin-bottom: 10px; } menu_ie7.cssで保存し、 index.html内に <!--[if gte IE 7.0 ]> <link rel="stylesheet" type="text/css" href="css/menu_ie7.css" /> <![endif]--> を追加しておきましたが、何の変化がありません。 間違っておりますか？ IE6用、IE7用のCSSを作成し、振り分けるようにしたいのですが、方法がありましたら、教えてくださいますか？ 宜しくお願いします。
お礼
お蔭様でレイアウトがきちんと揃えました。 しかし、メニュー以下コンテンツが消えてしまっています… これは新たに質問させて頂きたいと思います。 どうもありがとうございました。