- ベストアンサー
CSSでのIEとFirefoxの表示差異を改善する方法
- CSSでレイアウトを設定する際に、IEとFirefoxの表示差異が発生している場合、どのように改善すれば良いでしょうか？
- IEで表示されているレイアウトをFirefoxでも同じCSSで実現するためには、工夫が必要です。
- この記事では、IEとFirefoxの表示差異の原因と改善方法について解説します。
- grandswell
- お礼率100% (3/3)
- CSS
- 回答数2
- ありがとう数17
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (1)
- moon_night
- ベストアンサー率32% (598/1831)
あえて言うならば無理。 CSSの挙動がもともと違ったものなので。 どちらかにあわせるのは簡単なCSSならば可能ですが、段組などを統一するのは難しいところがあります。 どうしてもやる場合はCSSを使用しないで、HTMLのテーブルで組めば何とかなります。 またはブラウザごとにCSSを変えるか。 ちなみに段組CSSは、Operaだともっと崩れます。
お礼
ご回答ありがとうございます。 ブラウザ毎にCSSを替えることも検討に 入れたいと思います。 質問に記載したCSS/HTMLにおけるIEでの レイアウトをFirefoxで実現できるCSSを ご存知でしたらご教示ください。
お礼
ご回答ありがとうございます。 ストライクです！ 質問掲示後、自分で試行錯誤した結果 左右に分割している領域の親領域の widthとfloatを設定すると段組的にはほぼ 同じになることがわかったのですが 正解を知りたくて、もやもやしていました。 気分すっきりです。 本当にありがとうございます。