重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

XHTML+CSS で、ブラウザごとに表示が変わってしまう

解決済

  • 質問者：monnaka
  • 質問日時：
  • 回答数：1件

XHTML+CSS で作成したウェブサイトを
InternetExplorer で観覧すると思い通りに表示されるのですが、
Netscape で観覧すると、全く違った表示になってしまいます。
思い当たる節は直してみたのですが、改善されません。
どこがいけないのでしょうか。
もし宜しければ、教えて下さい。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： quads
  • 回答日時：

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;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

quadsさん、迅速なご回答、有難う御座いました。
本当に助かりました。
quadsさんが添削して下さったソースをもとに、
自分なりにさらに手を加えてみました。
まだ何か問題点があれば、どなたでもご指摘下さい。
宜しくお願い致します。

P.S：メタ情報は、自分なりにキチンとしているつもりだったのですが…。
どの辺が悪いのか、よく分かりません。
教えていただければ幸いです。

通報する
お礼日時：2005/08/16 08:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報