【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プログラミングは基本しないようにしよう・・・