【CSS】CSSテクニック IE6対策その①

コーディングでハマる罠っていうのは大体同じようなことだと思います。

まぁ95%以上の確率で、コーディング時の問題はIE6、IE7、IE8で起こると思います。

今回はコーダー最大の敵、というかコーダーおよびJavascriptプログラマー曰く「ほんと消えてなくなってほしい」代表のIE6くんの基本的な対策を紹介します。

●loat要素のmargin2倍問題
IE6ではfloatを指定した要素にmarginも指定すると、そのmarginの値は2倍で表示されます。これを防ぐにはdisplay:inline;を指定する

.sample{
	float:left;
	margin-top:100px;
	display:inline;
}

●min-height問題
IE6はmin-heightが反映されません。しかし、IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、単純にheightだけを指定すればOK。

.sample{
	min-height:500px;
	 height:500px; //heightの前に半角スペースがあるので、IE6だけに反映される
}

●position:relative問題
IE6ではposition:relativeをそのまま指定するとダメ。どうだめになるのかは未検証ですが、zoom:1;を追加するようにしましょう。

.sample{
	position:relative;
	zoom:1;
}

●ネガティブマージン問題
marginをマイナスで指定すると、要素が逆方向に移動しますが、IE6ではposition:relative; zoom:1を追加します。

.sample{
	margin-top:-50px;
	position:relative;
	zoom:1;
}

●overfllow:hidden問題
overfllow:hiddenにはzoom:1;を追加します。

.sample{
	overfllow:hidden;
	zoom:1;
}

とりあえず基本としてはこんなところだと思います。

IE6、IE7、IE8に関しては、困ったら「zoom:1;を追加」で問題が解決することが多いと思います。

IE6などはズレても修正が簡単ですが、まれに、ごくごーくまれにFirefoxだけ、とかsafariだけちょっとズレた、なんてときは結構大変ですよね。本当にまれですけれども。

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

コメント

  1. Neo A. 2012.03.01 3:06pm

    ああ、世界中のウェブ開発者にIEの壮大な贈り物。真剣に、なぜ彼らはあっても、代わりにこれらの問題に適応するスマートな開発者に頼ることなく、これらの問題自体を修正せずにブラウザを更新する気か?私は、彼らが意図的に、または場合は、これを行っている場合、彼らがどこまでも最初の場所で起動するように知っているか分からない。

    さらに不幸な開発者はそれで仕方なく契約を残さない多くの人々が実際にそう、よく(特に米国)はまだそれを使用している事実がある。

    Neo A.
    SpurPress