Aug18
IE6とFireFoxで知っておくべきmarginに関するCSSハック
今回はコーディングでよく悩まされるIE6とFirefoxでのmarginに関するCSSハックをご紹介します。
たとえば何かのブロック要素をfloatで右か左どちらかに寄せてしまうと、marginのautoが効かなくなります。 その場合は、普通にpxで幅のmarginを合わせることになります。 しかし、IE6とFireFox(FireFoxでなくてもW3C推奨ブラウザ)ではmarginの解釈が異ます。
例えば、左右に10pxをとるとすると、IE6では左右に20ｐｘづつmarginをとったように表示され、レイアウト崩れが生じてしまいます。
これはIE6がCSSに完全に対応していないために起こる現象なので、けっして自分の失敗ではないということを知っておかなければなりません。
対処方法として、IE6だけに効果を表す代表的なCSSハック” *html body をプロパティの前につけて、左右のmarginの数値を半分の5ｐｘに設定します。 これで、IE6、FireFoxともにレイアウト崩れを起こさずにきっちり表示されるでしょう。
IE7がブラウザのシェアをとるまでの当分の間は、こういったCSSハックを行うことがWEBデザイナーは必須となるでしょうね。
*html body div#main {
width:500px;
float:right;
margin:10px 5px;
}
div#main {
width:500px;
float:right;
margin:10px 10px;
}
Coments
ブラウザ間のCSSの表示の違いを考慮して作業するのは、本当に難しいよね。DTPをやってたものとしては、全ての幅、高さ、余白なんかに意味を持たせてしまうクセがついているだけに、どうしても設定したターゲットブラウザ全てに対応できる応用の効くレイアウトにしないといけないことが歯痒くて仕方ないっす。 ＊と_のハックはよく使うね。
投稿者: KOZZY | 2006年8月18日 23:25
ハックの作業は時間かかりますよね。
MacＩＥをターゲットに入れてるだけで結構作業時間が変わってきますよね。でもそれをきっちり行う事がプロなんだろうなぁと思います。
ぼくはそこまでできていない。。。
投稿者: u_ziq | 2006年8月20日 01:32
残念ながらIE7ではその方法はつかえないんですよね。
マージン2倍が改善されてるんですよ。
でも 「* html 」 はイキ。
う～～ん。どうしたものか。
投稿者: aLI | 2006年9月26日 20:26
IE7では* +htmlで対処するしかないですね。
マージンの問題はＩＥ6用ハックの* htmlで大丈夫ですけど場合によっては当分の間* +htmlと* htmlを組み合わせないといけませんね。
面倒ですけど。。。
投稿者: u_ziq | 2006年9月27日 00:54