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

解決済

質問者：grandswell
質問日時：2005/03/19 13:27
回答数：2件

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>
----------

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： steel_gray
回答日時：2005/03/19 20:18

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>

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2005/03/19 21:18

No.1

回答者： moon_night
回答日時：2005/03/19 15:51

あえて言うならば無理。

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

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

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