「IE float時のmargin倍増現象」

あまりにも有名で、基本的なバグです。

通常は組んでいる時に気付く、もっと言えば

デザイン段階でこのバグを考えながら作業を進める人だっていると思います。

ここではあまり詳しく解説しませんが、

とりあえず代表的な回避方法だけ。

【float要素に "inline" 】

フォントサイズの可変時などに崩れが起きる可能性はありますが、

簡単で、周辺要素を見直す時間がないとすぐに使っちゃいます。

【padding で調整】

おそらくこの状況に陥った方は、すでにfloat要素へのwidth指定などで

paddingは使用できない状態でしょう・・・

もし使える状況なら margin → padding へ！

【IE限定ハックにて対処】

IEでおこる現象なら、IEにだけ処置を。

という事でアンダースコアハック。

例）；

margin-left: 20px;　の場合

_margin-left: 10px;　をIE用に追加。

といった感じです。

やはり一番の回避策は、デザイン段階でコーディング方法も頭の中で同時進行する事。

これが出来れば綺麗なソースとコーディングが実現できます。

通常はデザインとコーディングは別工程で進む事が多いためなかなか難しいですが。。