『3ピクセルジョグ』:CSS2の正しい処方![2]/ブラウザ間の表示差を無くす

CSS2での段組では、Floatを使う方法と
position使う方法があります。

特にFloatに関してのブラウザ間のバグ・独自仕様は、
数え切れないほどあります。
その中で特に有名な『3ピクセルジョグ』と呼ばれるものに関して解説します。

■3 pixel Jog■
このバグは,
インライン要素をフロートで回り込ませようとする時
IE6以下についてのみ発生します。
ブロック要素同士のフロートや
IE7、モダンブラウザでは発生しません。

[症状]
下記をIE6とFirefoxの両ブラウザで比較してみてください。

■例題【1】3 Pixel Jog■

幅300pxのBoxの中に
Left Floatを設定した幅100pxのBoxと
回り込ませたい幅200pxの画像があります。
本来ならば、Firefoxで表示されるように
右の画像が回り込むべきなのに
IE6以下では周りこまずに落っこちたままです。

原因はIE6以下では3pxのマージンが自動的に設定されるからです。

実際に外側Boxの幅を3px増やして
303pxに設定してみると
IE6以下でもきちんと回り込むのが
はっきり確認できます。

外側BOXを3px増やしたサンプル

IE6専用にマージンを-3に設定したりするCSSハックの使用は根本的な解決ではありません。

ではこの症状の正しい処方は?

下記をどうぞ。

Date : 2009/01/02 12:25

Posted by valley | | 編集/Edit

3 pixel jog:CSS2の正しい処方

回り込ませたいインライン属性をブロック要素(例えばDIV)で囲むか、強制的にブロック要素にし、
Float:left(右に回り込ませる場合)と横幅を設定します。
これですべてのブラウザで意図どおりにインライン要素を回り込ませることができます。


■CSS2の正しい処方サンプル-3 poxel jog■

/*↓処方CSSソース↓************/


#base
{
padding:10px;
margin:10px auto;
width:300px;
height:100px;
background: #aaa256;
}

.f01
{
float:left;
width:100px;
height:100px;
color: #0033CC;
background: #FF9999;
}

img
{
float:left;
display:block;
width:200px;

}


ちなみにこの手法は、3 pixel jog だけでなく、すべての段組デザインで、ブロック要素インライン要素を問わず使用できます。

Date : 2009/01/12 02:45

Posted by valley | | 編集/Edit