- 締切済み
Dreamweaver使用 各種ブラウザーでのレイアウト崩れ
お世話になっております。 タイトルにあるレイアウト崩れについて現在悩んでいます。 皆様のお力をお貸しください。 DeamweaverCS3にて作成。確認用ブラウザーとして、IE7.8、Firefox3、Safari3、Sleipnir2にて確認していました。先日、ホームページ見たよ！って方から指摘があったのですがページのレイアウトがぐちゃぐちゃで見れないとの事でした。その方の使用ブラウザーは、IE6だったので当方でもIETesterにて各バージョンを確認したところ確かに指摘されたとおりでした。当方の、ホームページをアクセス解析したところIE6使用の方が結構おられました。なんとか、早急に対応出来ればと思っているのですが、同様の現象に遭遇された方いらっしゃいましたらご教授お願いいたします。できれば、再度作り直す事は避けたいです。 よろしくお願いいたします。
- nanda01
- お礼率21% (5/23)
- ホームページ作成ソフト
- 回答数6
- ありがとう数12
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- tenderfeel
- ベストアンサー率56% (215/379)
バグまとめたページがあったんですけど消えてしまったので、 「IE6 バグ」で検索トップのサイトを張っておきます http://webtech-walker.com/archive/2007/05/21215114.html リンク先はweb.archive.orgのキャッシュです。 カラム落ちで一番原因になりやすいmargin2倍バグはこちら▽ http://web.archive.org/web/20071214132842/cssbug.at.infoseek.co.jp/detail/winie/b107.html このバグは表示モードに関わらず発生します。 あと対策ですが、margin2倍バグはpaddingにすることで回避できますが、 どうしても個別に対応が必要な時は * html div{} 等のフィルターを使ったり、前に書いた方法で専用のCSSファイル作って対応するようにしています。 それでも無理なもの（透過PNGとか）はjavascript頼みです。 バグは繰り返しサイトを組む内に体感で覚えてしまいました。
- tenderfeel
- ベストアンサー率56% (215/379)
IE6専用のCSSを作成して修正するのがいいのではないかと。 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> 原因としては左右margin２倍バグあたりが怪しそうです。
- y_volk_han
- ベストアンサー率67% (87/129)
回答番号：No.2 のものです。 先の回答の、IE6 に関しての重要な補足があります。 IE6の場合、ページソース先頭に <?xml version="1.0" encoding="-------"?> というXML宣言がはいっていると DOCTYPE宣言の記述にかかわらず、強制的に「互換モード」になってしまうというトンデモない仕様です。 Firefoxやsafariでキチンと表示されるのでしたら、おそらく正しいCSS記述のページなのだろうと想像できます。しかし、IE6の互換モードでそれらを表示させるとトンデモないことになるのは、よくあることです。
お礼
ありがとう御座います。 先のお礼にも書きましたが、えらいことになりました。 IE6CSSを作成し、コンディショナル・コメントを使用しようと思います。
- abril
- ベストアンサー率69% (388/560)
> 再度作り直す事は避けたいです。 と仰られても、現在IE6で表示崩れが起きているものをIE6でも崩れない状態にしたいのであれば、いずれにせよ「作り直し」」は必須だと思いますが。 場合によっては、HTMLファイルはそのままでCSSだけ調整すれば何とかなる事もありますが…添付イメージの崩れ方を見ると、おそらくfloatなどの位置決めのスタイルの解釈が他の環境とは異なってしまっている様に推測されます。 IE6では制作段階で一度も検証されなかったんですよね？ IE7の評判が今ひとつな事もあり（IE8は正式版リリースからまだ日が浅いですし）、IE6のシェアはまだまだ多い様ですよ。今しばらくは対象ブラウザとして考えておいた方が無難ではないでしょうか。 原因が、CSSの修正だけで対応できる様な範囲であれば、コンディショナル・コメントやハックなどでIE6のみに適用されるスタイルを振り分ける事も可能です。 ※ちなみに、ANo.2様の方法には注意が必要です。 「IE6以外の環境のスイッチは切り替わらず、IE6のスイッチのみが切り替わる」組み合わせにならないと、それまで「正常に」表示されていたIE6以外の環境で崩れが起きる可能性もありますので、DOCTYPEスイッチについてよく理解をしてから検証される様、ご注意を。 また、DOCTYPEが変わる事で、HTML文書の記述の仕方も変更を必要とする場合が出てくる事もありますのでその点も考慮すべきかと。 > 同様の現象に遭遇された方いらっしゃいましたら 仮に崩れ方が同じ様に見えていても、その崩れの原因は多種多様、ケースバイケースの事もあります。いずれにせよ、HTMLとCSSを公開しない事には何も始まりません。
お礼
ご回答ありがとう御座います。 当初確認では、IE系とMozilla系にて限定して確認していました。 IE系でも、バージョン（IE7とIE8）によって多少の差異があるもののアバウトな設定にて対応出来ていましたが、IE6にてこうもレイアウトが崩れてしまうという事を今回知りました。IE6は、必須で今後作成にかかります。いい勉強になりました。 ご教授頂きました内容にて、IE６用CSSを作成し『コンディショナル・コメント』にて対応しようと考えています。 ありがとうございました。
- y_volk_han
- ベストアンサー率67% (87/129)
原因は、ブラウザとそのバージョンによるCSS解釈の違いなんですが。 ページ（おそらくCSS部分）を作りなおさないで対応することは出来ないです。 ただ、ごく希に、DOCTYPE宣言を書き直すだけで対応できる場合があります。 いまのブラウザはDOCTYPE宣言の記述により、表示モード（解釈モード）を替えるようになっています。 ＜参考ページ＞ http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html IE6 の場合… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> となっているなら <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としてやると、ＩＥ6のモードが「互換モード」から「標準モード」になり、表示が変わってくるかもしれません。 あくまで、これで対応できる場合もあるというだけです。 まず試してみてはいかがでしょうか。
お礼
ご回答ありがとうございました。 ローカルディスク上でも、IEのバージョンを変えて確認できるのでご教授頂いた手順で確認してみました。 結果は、IE系＆Mozilla系全滅でした。CSS切り替え対応を確認しようと思います。 世間のホームページ作成会社さんは、都度IE6用にCSSを作成してブラウザーのバージョンにて振り替える対応しているのでしょうかね？結構大変ですね。ともあれ、IE6用CSSは必要そうですね。ありがとう御座います。
IE6は特殊なのでIE6でも正常に表示出来るように作るなら、大改造が必要だと思いますが。 作り直さずにやるなら、ブラウザ判別してIE6とそれ以外でCSS切り替えて読み込むようにするのが一番楽だと思いますよ。
お礼
ご回答ありがとう御座います。 作成当初から、レイアウトの差異が発生する事を認識していたのでIE系とMozilla系に的を絞って確認をしていました。IE系でもバージョンでこうもレイアウトが崩れるのですね。勉強になりました。今後、IE6は要チェックですね。ご指摘のブラウザーを判別してCSSを切り替える方法を検討してみます。ありがとう御座いました。
お礼
ご回答ありがとう御座います。 ＞ 原因としては左右margin２倍バグあたりが怪しそうです。 バグですか！！後学のためにも、情報元URL等御座いましたらお教え願えますでしょうか。私の不慣れな作成手順に問題があったのかなとも考えていました。『どんな人：専門家』との事ですが、tenderfeelさんは、IE6対策はどの様にされているのでしょうか？支障の無い範囲でお教えいただければありがたいのですが。