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だともっと崩れます。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2005/03/19 16:40

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

質問する（無料）

このQ&Aに関連する記事

教えて!Firefox

今、見られている記事はコレ!

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...
なぜ批判コメントをするの？その心理と向き合い方をカウンセラーにきいた！

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...