P-0044 float の重大な注意点

気づいていない人も多いようですが、 CSS 2 の float は、 img など width 属性で元々横幅が指定されているもの（これを内在幅という）以外は width プロパティで auto 以外の具体的な幅を明示しなければなりません。

width 無指定で table や ul を float にした場合、 Windows の IE や Mozilla は 必要最小限の横幅の float としてそれなりに処理しますが、 MacIE は width が無指定の場合横幅100%の float として処理します。さらに言うと、仕様に厳密に従えばこの場合は横幅0の float として処理するのが正しいということで、特定のブラウザでの処理を基準に考えて「 auto ＝最小の幅」「 auto ＝最大の幅」と短絡的に認識するのは大きな間違いです。

メニューやコンテンツリストなどを float にする場合は、無精せずに、きちんと横幅を指定しておきましょう。

尚、 CSS には「自動で必要最小限の幅にする」という効果を明示的に指定するプロパティはありません（ display: table でテーブルレイアウトを再現すれば、そういう処理も可能ですが）。

PageTop

B:Back