[CSS]floatによるブラウザ間のズレの問題(1)

CSS | 2008/10/28 Tue
[CSS]floatによるブラウザ間のズレの問題(1)

テーブルレイアウトからCSSでのレイアウトに切り替える時に最初に覚える要素「float」
今回はその時の注意点と検証と解決法を紹介します。

このカテゴリでは、CSSでのブラウザ間のズレの修正やありがちな間違い、
IE6対策などを紹介します。

テーブルレイアウトからCSSレイアウトへ

第1回は、最初につまづきやすいfloatを使ったレイアウトです。
テーブルレイアウトからいざフルCSSで記述してみたもののIEと他のブラウザの見え方が違う
ということで諦めてしまう方も少なからずいると思います。
私も最初にCSSを使ってコーディングをした時苦しんだものです。

では最初にテーブルレイアウトで、背景が灰色で横幅350pxのボックスの中に
50pxの間隔を空けて100pxのボックスを2つ配置します。
以下のようになります。

実際に表示すると以下のようになります。

サンプル

floatを使う

それぞれのボックス名をcontainer,box1,box2にしてCSSで上記のレイアウトのように並べてみます。

プレビューは以下の通りです。今回はブラウザ毎に見てみます。

Firefox3
サンプル

IE7
サンプル

IE6
サンプル

Opera
サンプル

Google Chrome
サンプル

IE6だけ表示が異なってしまいました。
結論からいいますと、これはIE6のバグになります。
floatを指定した方向と、marginを指定した方向が同じ方向の場合、
IE6のみ倍のmarginが適用されてしまいます
ただし、そのmarginは親要素に対してのみです。

解決法は色々ありますが...

IE6だけ違うのですからIE6のみ適用するCSSを記述すればいい。
所謂CSSハックです。

最初に言っておきますとハックは出来る限り使わない方がいいです。
何故なら、これは苦肉の策であってその後のメンテナンス性も考えるととてもオススメできる方法ではありません。
それではmarginではなくpaddingを使うのはどうでしょうか。

これでも一応は解決します。このIE6のバグはmarginのみ発生するのでpaddingを使えば問題がありません。
しかし、box1でpaddingを使いたくなった場合、box1内にまた<div></div>を作る構造にしなくてはなりません。

最善の解決策

最初からこれだけ書けばよかった気もしますが、上記の方法では問題があることを言いたかったのです。
それでは解決方ですが、display: inline;を追加するだけになります。

本来<div>要素はブロックレベルですから、display: inline;を付加することによってインラインレベルになって しまうのではと思われるかもしれませんが、float属性が付いている時のみdisplay要素は無視される仕様になっています。
これで全く問題なく解決することが出来ます。

|Author:ミルト|Comment(1)|Trackback(0)| このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加このエントリーをBuzzurlに追加 このエントリーをnewsingへ追加 このエントリーをYahoo!ブックマークに追加 |
関連記事
TRACKBACK
COMMENT

Well said.

2008年12月05日 05:59