こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSS : IEとFirefoxの表示差異を改善したい

grandswellと申します。
よろしくお願いいたします。

サンプルをIE、Firefoxそれぞれで見ていただけると
わかっていただけると思うのですが、Firefox側が
意図した通りのレイアウトになっていません。

サンプルをIEで表示したレイアウトを
Firefoxでも同じCSSで実現するにはどのような
工夫が必要でしょうか。
ぜひご教示くださいますよう、お願いいたします。

以下、サンプルのCSSとHTMLとなります。
*cssサンプル(style2.css)
----------
div.main {
border-style : dashed;
width : 100%;
}
div.main div.contents{
border-style : dashed;
width : 75%;
float : left;
}
div.contents div.contentsmain{
border-style : dashed;
width : 100%;
}
div.contentsmain div.sidebar{
border-style : solid;
float : left;
width : 32%;
}
div.contentsmain div.entry{
border-style : solid;
float : right;
width : 66%;
}
div.main div.subspace {
border-style : dashed;
float : right;
width : 23%;
}
div.footer {
border-style : dashed;
}
----------

*htmlサンプル
----------
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="./style2.css" type="text/css">
</head>
<body>
<div class="main">
<p>main</p>
<div class="contents">
<p>contents</p>
<div class="contentsmain">
<p>contentsmain</p>
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="entry">
<p>entry</p>
</div>
</div>
</div>
<div class="subspace">
<p>subspace</p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
<body>
</html>
----------

投稿日時 - 2005-03-19 13:27:10

QNo.1278520

すぐに回答ほしいです

質問者が選んだベストアンサー

floatをさせた場合、それを含むブロックの高さにfloatしているブロックの高さは影響しない事になっています。
IEのようにfloatしているブロックの高さに自動で合わせられるのは便利な面もありますが、仕様どおりの動作ではありません。
以下のようにfloatしているブロックの下でflaotをクリアするようにすると、Firefox等の正しい動作をするブラウザでも段組ができます。
なお、テキストの上下のマージンがまだ異なります。
p {margin:0;} としてしまえばとりあえず揃いますが、
各ブロックに適当にmarginやpaddingを指定して揃えてください。


スタイルの追加
.FloatEnd {clear:both;}

HTMLへの追加(<br class="FloatEnd"> の追加)
<body>
<div class="main">
<p>main</p>
<div class="contents">
<p>contents</p>
<div class="contentsmain">
<p>contentsmain</p>
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="entry">
<p>entry</p>
</div>
<br class="FloatEnd">
</div>
</div>
<div class="subspace">
<p>subspace</p>
</div>
<br class="FloatEnd">
</div>
<div class="footer">
<p>footer</p>
</div>
<body>

投稿日時 - 2005-03-19 20:18:59

お礼

ご回答ありがとうございます。
ストライクです!

質問掲示後、自分で試行錯誤した結果
左右に分割している領域の親領域の
widthとfloatを設定すると段組的にはほぼ
同じになることがわかったのですが
正解を知りたくて、もやもやしていました。

気分すっきりです。
本当にありがとうございます。

投稿日時 - 2005-03-19 21:18:36

このQ&Aは役に立ちましたか?

15人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

あえて言うならば無理。
CSSの挙動がもともと違ったものなので。
どちらかにあわせるのは簡単なCSSならば可能ですが、段組などを統一するのは難しいところがあります。

どうしてもやる場合はCSSを使用しないで、HTMLのテーブルで組めば何とかなります。
またはブラウザごとにCSSを変えるか。

ちなみに段組CSSは、Operaだともっと崩れます。

投稿日時 - 2005-03-19 15:51:02

お礼

ご回答ありがとうございます。
ブラウザ毎にCSSを替えることも検討に
入れたいと思います。
質問に記載したCSS/HTMLにおけるIEでの
レイアウトをFirefoxで実現できるCSSを
ご存知でしたらご教示ください。

投稿日時 - 2005-03-19 16:40:51

あなたにオススメの質問