スタイルシートをめぐる冒険

CSSトラブルシューティング / float関連

ひとつの要素にfloatとmarginを同時に設定すると位置がずれる

ある要素にfloatと横方向のmarginの指定を同時に行うと、marginで指定した位置よりも右または左にずれるというもの。
[該当するブラウザ]
Windows／IE5.5、6.0

症状

Mac/IE5.1の場合

右のスクリーンショットを見てもらおう。左側に10ピクセルの余白をとってコンテンツA、その右にコンテンツB、というような2段組のレイアウトを組んだとする。スタイルシートでは、コンテンツAに float: left、margin-left: 10px と指定する。ちゃんと正しい位置に配置されているかわかるように背景画像に10ピクセル刻みで縦の罫線を入れてみた。ご覧のとおりMac（およびNetscape6.0以降）では位置のズレはない。

Windows/IE6.0の場合

しかし、Windows版のIE5.5、6.0ではコンテンツAの位置がずれ、余白は10ピクセルより広くなってしまう（→サンプルページ1）。右にマージンをとり、コンテンツBを左に回り込ませた場合も同様である（→サンプルページ2）。指定したマージンに対してどれくらいずれるか、マージンの数字を変えて試してみたところ、ほぼ指定したマージンの2倍になるようだ。

【スタイルシート】

#scale {
    width: 160px;
    height: 70px;
    background-image: url(bg3.gif);
}
#content-A {
    width: 100px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    float: left;
    margin-left: 10px;
}
#content-B {
    width: 40px;
    height: 50px;
    background-color: #999999;
    color: #ffffff;
    float: left;
}

【HTML】

<div id="scale">

<div id="content-A">A</div>

<div id="content-B">B</div>

</div>

原因

"float" とは、直訳すれば「浮かぶ」もしくは「浮かせる」という意味である。これがなぜ回り込みの指定になるのか、ピンとこないのだが、今回のようなケースを検証していると、何となくわかったような気がしてこないでもない。つまり、floatとは指定した要素とそれに続く要素を無重力状態の中にプカリと浮かせるようなものなのではないか。そして、float: leftとすると要素は左に寄ろうとし、float: rightとすると右に寄ろうとする。したがって、floatを指定した要素はフワフワと浮いているようなものだから、marginを設定して位置を横にずらそうとすると、指定した位置でピタリと止まらずに必要以上に動いてしまうのではないかと想像される。

対策

この現象がすべてのOS/ブラウザで等しく同条件で発生するなら、あらかじめズレを織り込んで指定すればよいだけの話だが、Netscape6.0以降やMacでは発生しないためそうはいかない。したがって、ひとつの要素に対してmarginとfloatを同時に設定しないようにするしかないだろう。

そこで、コンテンツAとコンテンツBの左右配置については、「要素を左右に隙間なく配置することができない」のところで検証した2番目の方法を採用し、全体の幅を固定するためのボックス（#both-content）に対して左マージンを設定した（→サンプル3）。

赤字は変更部分
【スタイルシート】

#scale {
    width: 160px;
    height: 70px;
    background-image: url(bg3.gif);
}
#both-content {
    width: 140px;
    margin-left: 10px;
}
#content-A {
    width: 100px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    float: left;
}
#content-B {
    width: 40px;
    height: 50px;
    background-color: #999999;
    color: #ffffff;
    float: right;
}

【HTML】

<div id="scale">

<div id="both-content">

<div id="content-A">A</div>

<div id="content-B">B</div>

</div>

</div>

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/5

Comments

kikky wrote:

displayを指定することで回避できます。
他のブラウザが仕様通りであれば問題はありません。
http://kikky.net/pc/css_bug041.html

(posted on 08/27/2007)

contents

CSS実験室

CSSトラブルシューティング

-- background関連 --

背景画像の位置指定では正確にセンタリングできない

-- float関連 --

-- ソースの記述 --

-- ボックス関連 --

-- 定義リスト関連 --

-- 標準モードと互換モード --

フォントサイズの指定がテーブル内に継承されない

feed

RSS2.0
ATOM

このサイトは、Creative Commons License のもとにライセンスされています。