スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IE6とFirefoxでfloatの処理が違う

例えば、


<div class = "A">
   <div class = "B">~</div>
   <div class = "C">~</div>
</div>

(~はなんかいっぱい文字)
みたいな感じになってて・・・


.A {
  margin: 0;
  padding: 0;
  whidth: 200;
  background-color: #fff;
  }


.B {
  margin: 0;
  padding: 0;
  whidth: 50;
  float: left;
  background-color: #000;
  }


.C {
  margin: 0;
  padding: 0;
  whidth: 50;
  float: left;
  background-color: #000;
  }


となってたとすると・・・


IEだとB、Cを含んでAが大きくなって、背景が白くなってくれるのですが、
Firefoxだと含んで大きくなってくれません。


どうやらFloatを使うとB、Cの表示の階層がAより上に行ってしまって
上に飛び出した状態になるようです。


そんな時の解決案は


.A:after {
  content: "";
  display: block;
  clear: both;
  }


を加えるといいみたいです。
ただ、Netscape だとこれでも駄目だったので・・・


A のところの記述に


  overflow:auto;


を加えると、背景が白くなりました。


しかし、結局のところ Netscape では微妙に表示がくずれてたので・・・


height をキチンと記入してやるのが一番いいみたいですね(汗
スポンサーサイト

COMMENT

NAME
TITLE
MAIL
URL
PASS (削除時に必要)
SECRET 管理者にだけ表示を許可する
COMMENT&
DECORATION

TRACKBACK

トラックバック

http://jikomanblogside.blog100.fc2.com/tb.php/12-704ad412

この記事にトラックバックする(FC2ブログユーザー)

プロフィール

plus9こんにちは。plus9です。
神戸在住で気が向けばちょこちょこwebやってます。
よろしくです~。
plus9のつぶやき plus9のmixi

ブロとも申請フォーム
ブログ検索
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。