- ベストアンサー
スタイルシートの表示結果の違い（IEとNetscape)
スタイルシートを使ってボックスのレイアウトをしています。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"> <!-- .left{ width: 130px; padding: 0px 0px 0px 10px; border:solid 1px; float: left; } .center { width: 540px; padding: 0px 10px 0px 10px; border:solid 1px; float: left; } --> </style> </head> <body> <div class="left"> ボックス１</div> <div class="center"> メインのボックス<br> IE6.0では「ボックス１」が左に配置され「メインのボックス」は右側に配置されます。<br> <br> しかしFireFox1.0やNetscape7.1では上から下へボックスが並んでしまいレイアウトが崩れてしまいます。<br> <br> </div> </body> </html>
- wallace-komatta
- お礼率83% (5/6)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問者さんのコードをそのままテキストに貼り付けて再現してみました。 全角スペースになっているところは、goo!サイトで段下げを表現したいからかと思いましたが、実際のソースでも全角スペースを使っているのではないですか？ 全角スペースを削除すると、IE、Opera、NN、FireFoxの表示が同じようになりました。
その他の回答 (1)
- Fukurow
- ベストアンサー率43% (50/114)
HTML文書で全角スペースの扱いはブラウザによって異なります。 一般に表示テキスト内で使用する場合にはテキストの一部として認識され、２つ以上のスペースでも正しく表示されます。 しかし、テキスト外での使用となると、普通ＩＥでは無視される場合が多いのですが、Netscape系のブラウザではバグと見なされ誤動作を起こします。 たしかにスタイルシートでは字下げをした方が見やすく、後々のメンテナンスも楽です。しかし、これに全角スペースを使うことは厳禁です。 どうしても字下げを使用したいなら[Tab]を使うようにしましょう。
お礼
さらに詳しい解説をありがとうございました。 日本語を入力しているうちに全角スペースを使ってしまっていました。 今後は字下げするときは「Tabキー」を使うようにします。 ありがとうございました。
お礼
早速のご解答ありがとうございました。 余分なスペースを削除してみたらどのブラウザでもレイアウトが崩れることなく表示できました。 「全角スペースはタブー」であると肝に銘じて制作していきます。 ありがとうございました。 （先ほど御礼の投稿したつもりでしたが、ここにアップされてなかったので再度送りました。先ほどのものとダブってましたらすみません）