久しぶりにie6でレイアウトが崩れたので復習

IE6はCSSの解釈がおかしい

CSSの解釈がおかしいためレイアウトが崩れ

 

ボックス幅の解釈

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

ボックス全体の幅は112px→IE6では全体で100pxとなります。

【対策】widthとpadding、borderを一緒に使わない

div#box1{
	width:100px;
}
div#box2{
	border:1px solid black;
	padding:5px;
}

例えば分けて指定

floatで回り込むとmarginが2倍に

div#box{
	float:right;
	margin-right:20px;
}

通常は20pxが、IE6の場合40pxとなる

【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに

div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

 

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

IE6のCSS対策の最終手段CSSハック

 

.sample{
	width: 100px;
	_width : 120px;
}

この場合、IE6以下のみ120pxとなり、他のブラウザでは100px

.sample{
	width: 100px;
}
* html .sample{
	width : 120px;
}

こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100px

cssハック css hack – スタイルシート —

CSS ハック

ブラウザごとの表示の違いを、ブラウザが持っている「バグ」を逆手に取って利用する方法。

CSSハックと呼ばれているもので、あくまでも応急処置的な意味で使う。

The W3C CSS Validationに通らないものもあります

IE6以下

スターハック

* html #contents { margin:0 0 0 10px; }

対応ブラウザ:IE4~6、MacIE4~5

セレクタの前に【* html 】を挿入

アンダースコアハック

#contents { _margin:0 0 0 10px; }

対応ブラウザ:IE4~6

プロパティ前に【_】アンダースコアを挿入

IE6のみ除外

#contents { color /**/:#000000; }

対応ブラウザ:IE7、IE8、Firefox、Safari、Opera

プロパティ後に【/**/】を挿入

IE7用

*:first-child+html #contents { margin:0 0 0 10px; }

対応ブラウザ:IE7

*:first-child+html】を挿入

IE6/IE7共通

#contents {/margin:0 0 0 10px; }

対応ブラウザ:IE6、IE7

プロパティの前に【/】を挿入

—————————————————————————-

【追記】

IE8
*+html>/**/body ●●●
IE7
*:first-child+html ●●●