IE6 以前で float に指定した margin が 2 倍になる現象を解消する

ランプの中身(Ruby on Railsのシステム開発): ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、お気軽にコメントを記述して下さい。

こんにちは。mugi です。
最近、Rails とあまり深く付き合っていないので、
IE6以前でfloatに指定したmarginが2倍になる現象を解消するCSSを書きます。

【HTML】

【CSS】

nibai {
float: left;
margin-left: 100px;
}

上記の CSS を適応した場合、IE6 以前で見ると画像の左 margin が二倍の 200px になってしまいます。
IE6 のバグなので、解消したい場合は display: inline; を加えます。

【CSS】

nibai {
float: left;
margin-left: 100px;
display: inline;
}

これで margin が 2 倍になるバグを解消することができます。
float をかけた要素は display: block; として扱われるので、
display: inline; を指定しても表示上の影響はありません。

トラックバック URL

この記事にコメントする

TOPICS

2008/08/14
「ZD Net Builder」の連載記事です。第七回は「Rubyでどう書く？：RubyCocoa＋Core Animationでお手軽アニメーション」が掲載されました。

2008/08/06
「ZD Net Builder」の連載記事です。第六回は「Rubyでどう書く？特別編：Matzからのお題」が掲載されました。

2008/07/29
「アットマーク・アイティ」にケータイWebアプリ開発、9つの注意点が掲載されました。

2008/07/11
「ZD Net Builder」の連載記事です。第五回は「Rubyでどう書く？：RubyでWord文書を作成する」が掲載されました。