- ベストアンサー
IE6.0とfirefoxでの表示の違い
はじめまて投稿させていただきます。 最近、xhtmlによるサイト作成を行っております。 わからないまま、cssを活用したページを作っておりますが 何とか作成できIE6.0で出来栄えを確認してもほぼ予想通りなので 安堵しております。 でも、firefoxでみると全てのページで配置が崩れているのに愕然としております。 何か根本的なものを見落としているのでしょうか。 どなたか教えていただけましたら幸いでございます。 宜しくお願いいたします。
- Diamonds2006
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
思いつくことを書きます。 pやh2などのmargin,paddingの初期値はブラウザごとに異なりますので、そこを追求してみてはどうでしょうか。 方法のひとつとして * {margin:0;padding:0;}として初期値をすべてゼロにする方法があります。 IEではmargin-bottomが反映されないというバグ（だったと思います）があるので、padding-bottomを使用することが必要。 XHTMLのXML宣言を行っていたらIEでは互換モードで表示されるというバグがあることも忘れずに。 FFだと、フォントサイズの初期値も異なります。ピクセル指定だと同じ表示になります。
その他の回答 (2)
よくある例： １．span,fontなどの非置換インライン要素にwidthやheightなどブロックレベル要素にしか使えない設定を行う。 ２．filterなどIEの独自拡張を使っている。 ３．要素の属性の使い方がIEを基準にした使い方となっている。
お礼
U-RIA_plua さま 早速ご回答頂きまして誠にありがとうございました。 1.に付きましては、外部CSSの内容をもう一度精査してみたいと思います。 2.3.に付きましては、皆さんの使われているブラウザの大半がIEということを考慮すると仕方がないのかも知れませんね。 と言うか、自分ではIE用とは意識しないで作っていましたので全くのノーガードでした^^; もっと他のブラウザのことも勉強しなければいけないということがよく分かりました。 どうぞ今後とも宜しくお願いいたします。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
>何か根本的なものを見落としているのでしょうか。 CSSなど表示関連解釈の違いだと思いますので、 見落としがあるのでしょうね。 IEで動いているのはたまたまでしょう。 個別のタグ設定などを上げてもらえない限り まっとうな回答はできませんが。
お礼
yambejp さま 早速ご回答頂き誠にありがとうございました。 本格的なCSS活用は初めてです^^; 解説書を見ながら悪戦苦闘です。 たとえば、・・・ ーーーーーーーーーーー <body> <div class="contents"><div class="toptitle03"> <h2トップページ > ページ1</h2> </div> <h3>テストページ</h3> <hr/> </div> </body> </html> 以上の内容でも、文字構成が崩れてしまいます。(^^ゞ .toptitle03 { height: 18px; width: 740px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; float: left; text-align: right; clear: none; margin-top: 35px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; border-top-width: 1px; border-top-style: dotted; border-top-color: #999999; font-size: 90%; padding-right: 10px; } h2 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 90%; font-weight: bold; width: auto; height: auto; color: #000066; margin: 5px; padding: 5px; float: none; } h3 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: bold; color: #000066; font-size: 90%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FCC7D7; width: 40%; height: 16px; vertical-align: middle; padding-top: 2px; } ーーーーーーーーーーー きっとこれだけの中にも、たくさんバグがあるのだと思いますが・・・^^; もしご面倒でなければ、バグをご指摘頂ければ幸いでございます。 どうぞ宜しくお願いいたします。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
partita さま 早速のご回答を頂き誠にありがとうございました。 ブラウザ毎に異なる初期設定、初心者の私には想定の範囲外でございました。 初期値を一旦ゼロにする考え方、試させて頂きたいと思います。 フォントサイズに付きましては、最初は絶対値を採用していたのですが、ユーザビリティーを考慮して伸縮自在のパーセンテージを活用しております。 ブラウザ作成者様へ切なる願いですが、せめて共通要素は独自性を持たせないでほしいものです。 この度は貴重なアドバイスを色々とありがとうございました。今後とも宜しくお願いいたします。