JIKOMAN blog -自己満ブログ-
plus9の日記 + FC2テンプレート作成
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 をキチンと記入してやるのが一番いいみたいですね(汗
<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
TRACKBACK
最近の記事
RSSフィード
ブロとも申請フォーム
月別アーカイブ
ブログ検索
最近のコメント
- がく:PWWtemplate03 (05/14)
- がく:(PWWtemplate03)テンプレート改造のヒント (05/14)
- jasmine:PWWtemplate02 (05/12)
- plus9:PWWtemplate02 (04/15)
- plus9:PWWtemplate03 (04/15)
- まったり:PWWtemplate02 (04/14)
- だんべぇ:PWWtemplate03 (04/03)
- plus9:(PWWtemplate01)テンプレート改造のヒント (03/12)
- plus9:PWWtemplate01、PWWtemplate02の検索不具合修正 (03/06)
- くみぞー:PWWtemplate01、PWWtemplate02の検索不具合修正 (03/06)