WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

○秘

IE float時のmargin倍増現象

カテゴリ:コーディングTips

2009年9月17日

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

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

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

 

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

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

 

【float要素に “inline” 】

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

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

 

【padding で調整】

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

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

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

 

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

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

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

例);

margin-left: 20px; の場合

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

 

といった感じです。

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

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

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

123

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ