今、作成中のサイトでthickboxを使っている。
jQueryは1.4.2
thickboxは3.1
一応、最新のものである

試作サイトで各ブラウザで確認したところ、IE6以外は問題なく表示される。
しかし、IE6だけはBOXは問題なく表示されるが、基のページのレイアウトが崩れる。

なぜだろう...

崩れ方を観察すると、全体のwidthが横幅いっぱいに広がる。
全体が太ってしまうのである。

「thickbox IE6 崩れる」でググってみる。
DOCTYPE宣言を変更するとか、IE6用のカスタマイズするとか...
どれもうまくいかない。

そこで原点に帰ってみる。
崩れ方は、「全体のwidthが横幅いっぱいに広がる。」
実は、スタイルシートでbodyタグの横幅とマージンを決めている。

html {
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0;
    vertical-align: baseline;
    background: transparent;
}
body {
    width : 750px;
    margin : 0px auto;
    padding : 0 0;
    border : 1px solid silver;
}

通常の表示上は問題なし
thickboxを表示すると、太る。
ならば body {width:750px  !important;}で優先順位変えてしまえ
と乱暴な事をしたところ
太らなくしてしまえば...orz
太らない、thickboxもきちんと表示...でも背景のマスクが変な感じ
ということで、ここへ来てthickbox.jsのソースをみる

なんと、IE6の処理として
  $("body","html").css({height: "100%", width: "100%"});
とある。
つまり、bodyの横幅いっぱいにされてしまっているのが原因。
IE6以外にはこの処理はない。

ググっていた時、次のようなサイトがあった
IEでだけレイアウトが崩れる場合はpaddingを探す - Sakura scope
「paddingによる崩れを解決するために、div#insideを作る」とある。
しかし、paddinngについては気を付けていたのでこれが問題ではないと思っていた。

しかし、原因は明らかにbodyのサイズ指定。
試作サイトのHTMLソース、CSSソースをみると bodyの直下にdivを作っていた。(仮にこのdivのidを"foge"としよう)
しかもスタイル設定全くなし
そこで、bodyのスタイル設定をfogeに移す。

body {
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0;
}
#foge {
    width : 750px;
    margin : 0px auto;
    padding : 0px 0px 0px 0px;
    border : 1px solid silver;
}

さぁ、まずはIE6で確認...OK
FireFoxで確認...OK
Operaで確認...OK
Safariで確認...OK
Chromeで確認...OK

もちろん、IE8でも確認...OK
解決である。

まぁ、thickbox.jsのソースを読めば、当たり前の事である。
しかし、CSSで左右に帯を置きたい場合、ついbodyタグに設定してしまう。
今後はこのことは気を付けるべきであると思った。

思ったついでに、あすまるのホームページをIE6でみる...orz
気を付けていたつもりが、いきなり崩れている。
thickbox以前の問題?!
至急対処しなければ!

ふぅ〜、やっと問題解決。
とあるサイトをCSSを使い、レイアウト。
一応、IE7、FireFox、Opera、Safari(Windows版)、Chromeでほぼ似たようなレイアウトになること、リンクに問題がないことを確認。
だからアップをしたのだが、「ボタン押しても何もならないよ」と連絡あり。
formタグ内にsubmitボタンを置けばよかったのだが、CSSとの関係でbottonタグをリンクでくくってみた。
FireFox、Opera、Safari、Chromeは問題ないが、IE7だけが動かない。
急ぎ対応しなければならなかったので、今回はなるべくJavascriptを避けたかったが、IEのためだけにjavascriptを入れて解決。

しかし、それ以上の大問題が発生!!
Windows XPでアクセスすると、レイアウトが思いっきり崩れる。
テスト確認する上で、IE6が欠けていたのがまずかった。
手元にWindows XPのノートパソコンがあるのだが、バッテリーに問題があるため、起動して使用できるのが10分程度しかない。
(バッテリーだと思うが、メモリーかもしれないが、突然堕ちる)
今、メインで使用しているのは、Vistaである。(ダウングレードPCは持っているが諸事情でVistaが必要なので)
そのため、IE7でしか確認できない。
XP ProのDSP版を持っているし、VMW WS5を持っているので仮想化すれば動かせるのだろうが、それをやっている時間がない。

そこで「IETester」を入れてみた。
若干、おかしな挙動はあるものの、IE5.5、IE6、IE7、IE8βが使える。
動作チェックをしながら、修正するにはちょうどいい。
(最終は古いXPマシーンで確認)

レイアウトの崩れは解消された(...実はトップページだけ)
一通り、他のブラウザでの確認もしてアップ。
ほっとしていたら
「XPで確認しようとすると、砂時計のままになる」と連絡あり。
「IETester」とXPで確認したつもりでいたが、レイアウトに気をとられていたようだ。
XPで確認した時、なぜかうまく動いたような気がしたのがよくなかった。

改めてCSSを調整。
たぶん透過PNGを使っているのが原因かと思い、すべてを透過GIFに変換。
これでうまくいくと思ったら...全然変わらず。
なぜだ!!

タグを一つづつ、CSSの記述を一つづつ、コメントアウトして原因を探る。
どうも挙動を見る限りでは、ループを起こしているようなのだが、先に書いたようにあえてJavascriptの使用は控えている。
特にトップページで使っていると言えば、Google Analysticsぐらい。
レイアウトの調整も各タグの幅を調整しただけである。
なのに...

そして本日、根本原因を突き止めた。
この記述である。
参考にしたテンプレートに似たような記述があり、それを使って最初のレイアウトを作っていた。
「まぁ、古いIEではこの記述は無視されるのだろうなぁ」
確かに「IETester」でIE5.5のテストをしたところ、無視しているようだった。
しかし、IE6だと無限ループを起こす。
結局、この部分と似たような記述の部分をコメントアウトし、高さの設定を修正した。
すると、IE6でもあっさりOK

Javascriptはブラウザの違いを気を付けないと、エラーだらけになるが、CSSのエラーは無視されるだけと高を括っていたのがまずかった。

しかし、マイクロソフトはいつまでIEと言う独自仕様を続けるのだろうか?
IE8で本当に解決できるのだろうか?

最近、メインブラウザはChromeとFireFoxになってきた。
以外に使えるのはSafari。βの時は問題だらけだったような気がするが、現状では全然問題を感じない。

でもIEだけは、Windows Updateが何かをするたびに不具合を起こしてくれる。
もう、IEなんていらないよ。
不具合だらけだし、起動も表示も遅いし
やっぱり、メインOSをLinuxに移して、VMでVistaやXPを動かすべきかなぁ
それとも確認用のUMPCを用意すべきか....

まずい、物欲が...