float方向のmarginが倍増するバグへの対応

Check このエントリーをはてなブックマークに追加

IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。

サンプル

float方向のmarginが倍増するバグへの対応のサンプル画像

これに対応する為にはfloatを指定している要素に対して、display:inlineを適応します。

div#box{
	float:left;
	margin:20px;
	display:inline;
}

サンプル

これは、ボックスのdisplay値を変更すると言う意味ではありません。

CSSの仕様上、'float'が'none'以外の値を持つ要素のdisplayの値は強制的にblockに変換される為、この記述には全く意味がありません。

IE6に対してfloat方向のmarginが倍増するバグへの対応としてのみ活用できる記述になっています。

関連エントリー

tableにおけるmarginの相殺
marginの相殺
Firefox3でメイリオを指定するとinputのsizeが倍増する
input要素などにおけるIEのバグ
operaでのfloatの挙動

スポンサードリンク

«第9回 hover - jQueryによるJavaScript入門 | メイン | 9月のセミナー案内»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/536
トラックバック内容
» CSS/floatのmarginが倍化するバグへの対処法 from MyMemo (PukiWiki/TrackBack 0.3)
IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。 これに対応する為にはf...
トラックバック時刻: 2008年8月30日 16:19
コメント

スターハックでIEにパッチあててる最中だったので、とても有り難い情報でした。これから試してみます！！
価値ある情報を、いつもありがとうございます。

投稿者:ナカヤマ | 2008年8月26日 22:20

立て続けにコメントすみません。
必殺技、試してみましたが、IE6だと、
標準準拠のブラウザにくらべて、今度は逆にマージンが狭くなってしまいますね。
本来解釈しないはずのfloat要素のinlineも、やっぱり独自なIEは、解釈してしまっているのか・・・？他の部分の構成との兼ね合いかしら。

ちなみにDOCTYPEは、xhtml1.0 Strict のutf-8でした。

投稿者:ナカヤマ | 2008年8月26日 22:29

基本的にちゃんと動くのですが、他の記述によっては正常に動かないというという話は聞いたことがあります。(私は体験したことないので、どのような時に発生するかはわかりませんが)

よろしかったらソースを教えていただけないでしょうか?

コメント欄ではHTMLを許可しておりませんので、URLをお伝えいただくかメール(nishihata[at]to-r.net)でお伝えいただけたらうれしいです。

投稿者:西畑一馬 Author Profile Page | 2008年9月 2日 13:38

西畑さま

まず、結論から…
すみません、正常に動作しました！！

作っていたページは見せられないのですが、
スターハックでマージンを半分に設定している部分すべてを display: inline; に置き換えて、確認してみたところ、結果はばっちりで、当初の状況は再現しませんでした。

floatを多用したレイアウトで、作り途中の段階だったので
私がなんらか、おかしなコーディングをしていたのだと思います。

画期的な情報に、役立たないコメント入れてすみません（汗

今後も心して拝読させていただきます！

投稿者:ナカヤマ | 2008年9月 3日 10:22

＞ナカヤマさん

動いたんですね。よかったです。
これからもよろしくお願いいたします。

投稿者:西畑一馬 Author Profile Page | 2008年9月 6日 03:04
コメントを投稿

現在不具合でコメントできません