トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

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

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

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

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

■例題【1】3 Pixel Jog■

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

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

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

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

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

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

下記をどうぞ。

回り込ませたいインライン属性をブロック要素(例えば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 だけでなく、すべての段組デザインで、ブロック要素インライン要素を問わず使用できます。