スポンサーサイト

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

入れ子になったdivの子要素にmargin-topを入れた時のfirefoxのバグ

下記のようなCSSとHTMLがあった場合のfirefoxのバグについてメモ。
style.css

.boxA {
background-color:red;
height:260px;
}
.boxB {
margin-top:5px;
background-color:blue;
height:190px;
}


margin.html

<div class="boxA">
<div class="boxB">
box A B
</div>
</div>


このとき、IEだと正常にboxA と boxBの間に余白が入る。
IEで見た時のキャプチャ

同じものをfirefoxで見ると余白が入らない。
firefoxで見た時のキャプチャ


これはfirefoxのバグらしい。

margin-topで起きるFIREFOXのバグ

対処法は2つ。

1.margin-topではなく、padding-topを使う。
2.boxBにfloat:left を入れる。

注:1の場合はboxBにも背景とかを設定しているとIEと同じにならない。
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


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