IEでfloatさせたボックスのmarginが倍くらいになる対処方法

CSSレイアウト初心者が一度は経験するであろう。このIE6でfloatさせたボックスのmarginの解釈の違いだと思います。

よくIEだけが右カラムが落ちてる...っての聞きますが、殆どの場合がpaddingで指定すれば解決出来る問題なんですよね。

それでは具体的な対処方法を解説していきたいと思います。

…ここからが続き

IE6のバグ:例

まずはサンプルを見て下さい。

IE6で見るとレイアウト崩れがおこっています。

XHTML

<div id="contents">
<h1>contents</h1>

<div id="main">
<h2>main</h2>
</div>

<div id="sub">
<h2>sub</h2>
</div>

<!--/ #contents--></div>

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
	margin-left: 24px;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
	margin-right: 24px;
}

※分かりやすい用にdivに色をつけ、heightを指定しています。

本来なら下記画像の用になるはずですよね...

IE7やFireFoxでは上記の用に表示されていると思うんですが、IE6はどういう分けか25pxを約50pxと倍の解釈をし、横幅が大きくなったdivはカラム落ちしてしまうって感じなんです。

IE6のバグ:対策1 paddingで解決

変更するCSSはmainで指定したmargin-left: 24px;とsubで指定していたmargin-right: 24px;をcontentsの方でpaddingの左右に24pxずつとってあげたらいいんですよね。

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
	padding-right: 24px;
	padding-left: 24px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
}

これでIE6でもレイアウト崩れをおこす心配はないです。

IE6のバグ:対策2 アンダースコアハックで解決

IE限定バグの為ハックで対応するって方法です。
デザインなどの関係で、どうしてもpaddingで指定する事が出来ない場合はこの方法を使います。

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
	margin-left: 24px;
	_margin-left: 12px;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
	margin-right: 24px;
	_margin-right: 12px;
}

IE6のバグ:その他の解決方法

上記以外にもdivなどを追加する方法やfloatをdisplay: inline;にする方法があるんですが、個人的に使う事はありません。理由としては下記の通りです。

  • 個人的に無駄なdivは追加したくない。
  • inlineにしてしまうと、フォントサイズを大きくした場合レイアウト崩れを起こしてしまう。

CSSレイアウトでIEとの違いを出来るだけ出さないようにするには、今回の「paddingで解決」で説明したように、divの親要素でpadding指定をしてくと、大きなレイアウト崩れはおきにくいと思います。 それ以外にも慣れていない人は、こまめにブラウザチェックをしながら作っていくと良いと思いますよ。

全部完成してから、レイアウト崩れを発見しても原因の場所をつきとめるのってけっこう手間のかかる作業だと思いますし、マメにチェックしていれば、崩れた要因は直ぐに見つける事が出来ますからね。
後は慣れです。

Comments

MIYA

MIYA

luckyさんこんばんわ^^

この用なコメントを頂けて嬉しい限りです^^今後の励みになりますよ^^

今月はけっこう忙しくしており記事を書く時間がないのですが、落ち着いたら参考になれるような記事を書いていきたいと思います☆

2009年08月10日 01:07

lucky

lucky

こんばんわ^^

以前 javaのサイトを紹介されているところへ
コメントをしましたluckyです。

最近「IE6」で、HPをみて
レイアウトが崩れていることに気が付き

対応していない箇所を修正する為に、
marginの対処方法をはじめ
「CSSビギナー向けのコーナー」に書かれている
対処方法をいろいろ参考にさせていただきました。

おかげさまで 無事 修正することができました。

ありがとうございました。

2009年08月09日 22:54

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article