- ベストアンサー
XHTML+CSS で、ブラウザごとに表示が変わってしまう
XHTML+CSS で作成したウェブサイトを InternetExplorer で観覧すると思い通りに表示されるのですが、 Netscape で観覧すると、全く違った表示になってしまいます。 思い当たる節は直してみたのですが、改善されません。 どこがいけないのでしょうか。 もし宜しければ、教えて下さい。 宜しくお願い致します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
xml宣言によりIEでは過去モードで解釈され、かつIEのバグによる解釈が重なり、IEではご覧のような表示結果となります。 箇条書きで挙げてみると… ●height:100%の認識 ●text-inline:centerのブロック要素レベルへの適用 ●要素の上下余白が、余白を指定した要素の上下に何らかの要素が無い場合に無視される ●サイズ指定のフロート化されたボックスサイズまでも計算する ●ブロックサイズがborderの幅やpaddingまで含む。 いろいろありますが、眠いのでこの辺で（笑 で、眠いながらにもNNとFFあたりで同等の表示になるように作ってみました。 が、最適ではありません。ある程度同じように見せているだけなので、xml宣言ありXHTML1.1での作成をされるのであれば、もっと厳密なクロスブラウジングをするようにしてください。 また、meta情報などもきちんとした方がいいかもしれません。 XHTML1.1ということで考慮されているのであれば良いですが。 今回は次のソースで勘弁っ。 この投稿時に何らかのミスがあるかもしれませんが、その時はすみません…。 <body> <div id="wrapper"><div id="content"> <h1>The Website</h1> <hr /> <p class="nmt nmb">[ トップページ ] [ <a href="information/">情報</a> ] [ <a href="diary/">過去日記</a> ] [ <a href="links/">リンク集</a> ]</p> <hr class="mb" /> <div id="left"> <div class="subject p">更新履歴</div> </div> <div id="right"> <div class="subject nmb p">2005年8月15日 月曜日</div> <p class="nmt ml">テスト公開</p> </div> <div class="clear"> <div id="main"> <p> フロート部以降のブロック </p> </div> </div> </div></div> </body> </html> body { margin: 0px; padding: 0px; background: #9f9 url(../images/wall.gif); text-align: center; } #wrapper { width:700px; margin:0 auto; } #content { height:100%; padding: 20px 20px; background: #fff; text-align: left; } #left { float: left; width: 175px; border: 1px solid #696; font-size: 85%; } #right { float: right; width: 475px; border: 1px solid #696; } .clear { width:100%; clear:both; padding-top:20px; } #main { border: 1px solid #696; } h1 { margin-top:0; padding: 10px; border: 3px dashed #0c0; background: #cfc; } h2 { } h3 { } p, .p { line-height: 150%; font-size: 92%; } hr { border: solid #696; } .subject { font-weight: bold; border-left: 10px solid #0cc; padding-left: 5px; background: #cfc; } .b { font-weight: bold; } .nmt { margin-top: 0px; } .nmb { margin-bottom: 0px; } .nml { margin-left: 0px; } .nmr { margin-right: 0px; } .mt { margin-top: 20px; } .mb { margin-bottom: 20px; } .ml { margin-left: 15px; } .mr { margin-right: 20px; }
お礼
quadsさん、迅速なご回答、有難う御座いました。 本当に助かりました。 quadsさんが添削して下さったソースをもとに、 自分なりにさらに手を加えてみました。 まだ何か問題点があれば、どなたでもご指摘下さい。 宜しくお願い致します。 P.S：メタ情報は、自分なりにキチンとしているつもりだったのですが…。 どの辺が悪いのか、よく分かりません。 教えていただければ幸いです。