marginの値が2倍になる [ Develop, Nucleus ]
これ前にも遭遇していたのだけど、またはまってしまった・・・。
ということでメモ。
Windows／IE5.5、6.0において、float指定した要素にmarginを設定するとそのmarginの値が約2倍になる。この対応策としてはfloat定義した要素にmarginを設定しない。
詳しくはこちらへ。スタイルシートの限界
ちなみに"clear: both;"が入っていても同様の症状が発生するので注意。
あとmarginにマイナス指定にして上にかぶせるようにして回避する方法もあるようだけど、これをすると下に位置する要素のテキストなどが選択できなくなる場合がある。この辺詳しいことはわからないけど、経験的にそうなるということだけメモしておく。（よくブログで本文が選択できない（もしくはどうやっても全選択みたいになってしまうというケースはこれが原因か、position:absoluteが原因な気がする）
コメント
フロートした要素のマージン2倍バグは有名ですね。これは対象要素に
display:inline;
を指定することで回避できます。このとき、floatの指定より先にこれを書いてください。
floatが指定された要素のdisplayプロパティは問答無用でblockとみなされるのが仕様ですが、なぜかIEでは先に指定したdisplayプロパティの値が影響し、なんかマージンが正常な(2倍でない)値になります。
投稿者: kotaro | 2006年04月29日 03:25
私もよくはまりますわ。
でもブラウザごとの若干の違いはスルーしてますが。
投稿者: ケソスケ | 2006年04月29日 05:53
>display:inline;
おぉ、これは知りませんでした。なるほど、これをするとmargin設定のためだけのdivとか作らなくてもいいですねぇ・。
なんかこういうﾉｳﾊｳってみんなたくさん抱えていると思うんですが、なかなかうまく共有できないもんですねえ・・。
投稿者: +39 | 2006年04月29日 17:08