【CSS】IE6でposition: relativeを使っているとウィンドウサイズ変更でレイアウトが崩れる

外部公開向けのサイトでいろんなブラウザで動作確認していると、結構ブラウザごとの表示の違いに悩まされる。

確認するのは、IE6, IE7, IE8, Firefox, Macのsafari, Google Chrome

基本無視するのは、Opera, Mozilla, Netscape, SeaMonkey

今回Wordpressをカスタマイズして作ったポータルサイトでは、IE6だとウィンドウを最大化したり元に戻したりするとposition: relativeに設定してある要素がウィンドウについていかない現象が発覚。

意味なくposition: relativeと書いてある所は基本削除。

一発で対応するためにはie6だと読み込まれるcssを作り(wordpressだとie6.css)、これに

body {

  positon: relative;

}

を記述すると直る。

position: relative;を使うようなCSSプログラミングは基本しないようにしよう・・・