スタイルシートを使ってボックスのレイアウトをしています。IE6.0ではうまくいきますがNetscape7.1では崩れてしまいます。どのようにソースを修正したらいいでしょうか教えて下さい。質問用のページボックス１メインのボックス IE6.0では「ボックス１」が左に配置され「メインのボックス」は右側に配置されます。しかしFireFox1.0やNetscape7.1では上から下へボックスが並んでしまいレイアウトが崩れてしまいます。

スタイルシートの表示結果の違い（IEとNetscape)

解決済

質問者：wallace-komatta
質問日時：2005/06/20 13:45
回答数：2件

スタイルシートを使ってボックスのレイアウトをしています。IE6.0ではうまくいきますがNetscape7.1では崩れてしまいます。
どのようにソースを修正したらいいでしょうか教えて下さい。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>質問用のページ</title>
<style type="text/css">

</style>
</head>
<body>
<div class="left">
ボックス１</div>
<div class="center">
メインのボックス<br>
IE6.0では「ボックス１」が左に配置され「メインのボックス」は右側に配置されます。<br>
<br>
しかしFireFox1.0やNetscape7.1では上から下へボックスが並んでしまいレイアウトが崩れてしまいます。<br>
<br>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： 9arabi
回答日時：2005/06/20 15:08

質問者さんのコードをそのままテキストに貼り付けて再現してみました。

全角スペースになっているところは、goo!サイトで段下げを表現したいからかと思いましたが、実際のソースでも全角スペースを使っているのではないですか？
全角スペースを削除すると、IE、Opera、NN、FireFoxの表示が同じようになりました。

- 0
- 件

通報する

この回答へのお礼

早速のご解答ありがとうございました。
余分なスペースを削除してみたらどのブラウザでもレイアウトが崩れることなく表示できました。
「全角スペースはタブー」であると肝に銘じて制作していきます。
ありがとうございました。
（先ほど御礼の投稿したつもりでしたが、ここにアップされてなかったので再度送りました。先ほどのものとダブってましたらすみません）

通報する

お礼日時：2005/06/20 16:14

No.2

回答者： Fukurow
回答日時：2005/06/20 15:24

HTML文書で全角スペースの扱いはブラウザによって異なります。

一般に表示テキスト内で使用する場合にはテキストの一部として認識され、２つ以上のスペースでも正しく表示されます。
しかし、テキスト外での使用となると、普通ＩＥでは無視される場合が多いのですが、Netscape系のブラウザではバグと見なされ誤動作を起こします。
たしかにスタイルシートでは字下げをした方が見やすく、後々のメンテナンスも楽です。しかし、これに全角スペースを使うことは厳禁です。
どうしても字下げを使用したいなら[Tab]を使うようにしましょう。