- 締切済み
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を切り替える方法を検討してみます。ありがとう御座いました。
関連するQ&A
- ウェブブラウザーの比較
ウェブブラウザーには、 Internet Explorer Firefox Safari Opera Sleipnir Chrome とイロイロな種類がありますよね そこで質問なんですが 僕はIEを利用しています。 そしてホームページを作成しています。 自分が作成したホームページを他のウェブブラウザーで 見たらどんな風になっているか知りたいです。 知りたいからと言って これらの種類を全部ダウンロードするのはチョット・・・ IEで見たらこんな感じ Firefoxで見たらこんな感じ Safariで見たらこんな感じ・・・ って判るようなツール的な物はありませんか？ (もしくは、そんなサービスをしているページとか) よろしくお願いします。
- ベストアンサー
- Windows系OS
- 同じブラウザでレイアウトが崩れるのはなぜですか？
同じブラウザ(IE8)を使用しているのに、CSSレイアウトが崩れます。 ＨＴＭＬ、CSSをタグ打ちでホームページを作成したのですが、 2台のまったく同じパソコンで表示させたところ、同じブラウザ(IE8)を使用しているのにレイアウトが違っています。 自分のパソコンでは思い通りのレイアウトで表示されるのですが、もう一台の同じパソコンでは余白が広すぎたり、 2段で表示されたりしてしまいます。 ちなみにCSS検証サービスなどでは問題ありませんでした。 他のブラウザでも私のパソコンでは同じレイアウトで表示できます。 何がダメなのかまったくわかりません。 サーバーはFC2の無料サーバーを使用しています。 考えられることがあれば、何でもいいのでどなたか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- Windowsのブラウザ
Windowsのブラウザで IE firefox Chrome Sleipnir Opera safari 以外でオススメのものを教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- 各ブラウザのファイルサイズ
こんにちは。 Win7,IE9を使用しているのですが、 ほかのブラウザーに乗り換えようと思っております そこで質問なのですが、 IE,Firefox,Chrome,Opera,Safari,sleipnir のファイルサイズをご存知の方はいらっしゃいませんか。 一部でもいいのでご存知の方いましたらお教えいただけると幸いです また、お勧めのブラウザ等ありましたら一緒に教えてくれると嬉しいです。
- ベストアンサー
- その他（インターネット接続・通信）
- ブラウザによって見え方が異なる。
ブラウザによって見え方が異なる。 お世話になっております。 ホームページを作る際に、 ページ内に、表（<table>）やフォームを使っています。 特に、ページのレイアウトには、よくテーブルを使用しています。 しかし、 ブラウザ（safari（mac）、ie（windows）、firefox、operaなど）によって、 見え方がことなります。 たとえば、 ・ieでは、表の<td>内に文字がおさまっているが、 safariでは、おさまらず改行される。 ・form内のボタン（type=button）やテキストボックス（type=text）が、 ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。 などです。 周囲に聞ける詳しい人もおらず、いろいろ調べたのですが、よく分かりませんでした。 スタイルシートというのを使うのでしょうか。 というより、それが常識なのでしょうか。 私はスタイルシートについては、超初心者なのですが・・・。 あるいは、別の問題なのでしょうか。 大変恐縮なのですが、これらの解決に、参考となるサイトなどあれば、ご紹介いただきたいのですが。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- ブラウザ表示について
ブラウザ表示について DreamWeaverCS4でホームページをつくってfirefoxやIEやsafariなどで確認すると 文字をヒラギノで指定してしてたのがIEでは明朝になったり ケイ（ボーダーライン）を引いてたのがsafari では表示されなかったり 統一した表示にしたいのですがコードをどのように 書けばいいのでしょうか？
- 締切済み
- HTML
- 教えてつかぁさい。ＨＰのレイアウトについて。
どうすればいいのですか？ｈｔｍｌ ・CSSのレイアウトについて教えてください 素人なのでうまく説明できないかもしれないですが、よろしくお願いします。 メモ帳を使い、会社のホームページを作成しました。 FC2の無料サーバーにアップロードし、IE8でホームページを開くと正常に表示されました。 CSS検証サービスなどもクリアーし、他のブラウザ(Opera,Firefox,Safari)でも問題なく同じレイアウトで表示されます。 ところが、私の使用しているパソコンとまったく同じ機種(ブラウザIE8、同じモニターサイズ、表示の設定なども一緒)のもう一台のパソコンでホームページを開くと、レイアウトが崩れてしまうのです。 わけがわからないので、とりあえずCSSにclear:bothなどのソースを追加し、そのファイル(メモ帳)を〔プログラムから開く〕でIE8で開くとレイアウトが崩れているのですが、そのファイルをサーバーにアップロードしてIE8(他のブラウザでも)でホームページを開くと正常に両方のパソコンで表示されるのです。違う機種のパソコンでも正常に表示されました。 そこで質問です。 そもそも、こういう事ってあるんですか？あるのなら回避方法を教えてください。それとも、このまま仕方なくサーバーにアップロードし、ホームページ上では正常に表示されるが、メモ帳から開くとレイアウトが崩れている、このファイルをこのまま使うのが良いのか、それとも何かほかに良い方法があるのでしょうか？ 分かりにくい長文になり申し訳ないのですが、どなたかお知恵をお貸しください。よろしくお願いします。社長に叱られます。
- ベストアンサー
- HTML
- あなたが使用しているブラウザーを教えてください。
以下から選んで下さい。 1.IE8 2.IE7 3.IE6 4.IE5.5以前 5.IE以外のIEコンボネットブラウザー 6.Firefox4.0 7.Firefox3.6以前 8.GoogleChrome 9.Opera 10.Safari 11.その他 以上から選んで下さい。
- 締切済み
- アンケート
- ブラウザによってCSSレイアウトが崩れる
個人でサイトを運営しています。ビルダー等のソフトを使わず、ＨＴＭＬタグ打ちで作っています（独学です）。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってＣＳＳでレイアウトするようになりました。 普段ブラウザはＩＥ６を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Ｆｘを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にＩＥ７を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか（widthやheight、margin、paddingなどで間違いがある）、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。
- ベストアンサー
- ブラウザ
お礼
ご回答ありがとう御座います。 ＞ 原因としては左右margin２倍バグあたりが怪しそうです。 バグですか！！後学のためにも、情報元URL等御座いましたらお教え願えますでしょうか。私の不慣れな作成手順に問題があったのかなとも考えていました。『どんな人：専門家』との事ですが、tenderfeelさんは、IE6対策はどの様にされているのでしょうか？支障の無い範囲でお教えいただければありがたいのですが。