ホームページのネタ帳

IE6などで、floatさせたボックスに設定したmarginが、設定の倍になってしまう時の対処方

2012年8月02日

例えば、メインコンテンツがあってサイドがある、というデザイン(2カラム)のとき、
IE7以降で見たときは思った通りの配置で見えているのに、
IE6で見たときは配置がくずれている(サイドが下にいってしまっている)というようなことありませんか?

 

■sample

 

【html】

1
2
3
4
<div class="sample_1 clear">
	<p class="sample_2"><img src="images/sample_20120802_01.gif" width="300" height="150" alt="sample_01" /></p>
	<p class="sample_3"><img src="images/sample_20120802_02.gif" width="150" height="150" alt="sample_02" /></p>
</div>

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.sample_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
	border: solid 1px #FF0000;
}
.sample_2 {
	float: left;
	width: 300px;
	margin: 0px 0px 0px 20px;
	padding: 0px;
}
.sample_3 {
	float: right;
	width: 150px;
	margin: 0px 20px 0px 0px;
	padding: 0px;
}

 

IE6以外のブラウザだと、ちゃんと横に並んで見えていると思います。

しかし、IE6だと…

 

 

こんな風に、サイドが下にいってしまって、レイアウトがくずれてしまっているのではないかと思います。

これは、floatさせたボックスにmarginを設定すると、
「IE6ではmarginが倍になってしまう」というIE6のバグのようです。

大抵の場合は、marginで指定している左右の余白部分をpaddingで設定すれば、
IE6でも問題なく横に並んで見えます。

しかし、「デザインの関係上、どうしてもpaddingは設定できない」という時は、
以下のようにcssを設定すればIE6でも問題なく横に並んで見えます。

 

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.sample_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
	border: solid 1px #FF0000;
}
.sample_2 {
	float: left;
	width: 300px;
	margin: 0px 0px 0px 20px;
	padding: 0px;
	/* 追記 */
	_margin: 0px 0px 0px 10px; 
}
.sample_3 {
	float: right;
	width: 150px;
	margin: 0px 20px 0px 0px;
	padding: 0px;
	/* 追記 */
	_margin: 0px 10px 0px 0px; 
}

 

追記したのは、「アンダースコアハック」というもので、
ものすごく簡単に言うと「IE6にのみ適応されるcss」です。

(厳密に言うと違うので注意です!)

これを設定することにより、IE6でも他のブラウザと同じように見せることができます。

注意点としては、marginにアンダーバーをつけただけではなく、
余白の設定を、必要な余白(この場合「margin 20px」)の半分(この場合「margin 10px」)にしているという点です。

どうして半分に設定してるかというと「IE6ではmarginが倍になってしまう」からですね。

 

floatさせているボックスに背景色などを設定しているときなどに使えそうです。



投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp