タグ: Javascript

うちのサイトなんかでもそうなんだけど、WordPress で CG を別ウィンドウで拡大表示できるプラグインがあるのね。これは元々有名な lightbox とかfancybox っていうライブラリをつかっている。で、コイツ、IE9 だと何故かちゃんと表示されないという現象が前々から起きていた。まー、とりあえずいいやって思ってはいたものの、設定によってはまったく表示されないこともあるので、ずっと原因を探っていた。

起きるトリガは、position: absolute。これをつかって座標指定してある要素内の画像（img）はすべて IE9 では正常に表示されない。

最初ソースを解析しようとしたんだけど、Javascript ってサイズを小さくするために、組んだあと難読化（改行とか削り、変数名も 1 文字とかにして、とことんバイト数を削っている）するのが常識なようで、とにかく解析するのが面倒くさい。って思ったら、本家のサイトに難読化する前のソースがあった（ぁ。
まぁそれを調べたりどしたりしていると IE9 だけ座標と画像のサイズが取ってこられてないことが判明。
なんだこりゃ？？
というわけで、ネットを徘徊して調べるも多くは fancybox のバージョンを上げたら直りましたっていうのばっかり。いやそうじゃないんだ、と思いながら、ボクのサイトで座標指定して IE9 で開いてみたら普通に表示されたのね。

なんだって！？

ということはボクの組み方そのものが不味いのか？
っと WordPress のスキンを眺めたところ、目についたのが、DOCTYPE だ。こいつはその HTML ファイルが、どのバージョンの仕様にのとって作られているかを宣言している。

ボクは未だにレイアウトに table を使う。これはバッドノウハウなのだが、正直、ドット単位の細かな位置合わせって、ボクの組み方が悪いのだろうが CSS はめんどくさくてしようがない。その辺 table はわりと簡単にできてしまうので、ついつい table を頼ってしまうクセがあるのだ。
が、この table タグは今の HTML では推奨されない指定が存在するのだ。width とか height とか。これらを有効にするためには、DOCTYPE で古いバージョンの仕様であることを明示しなければならない。ところがこれは Javascript にも影響するようで、ちゃんと調べてないんだけど DOCTYPE によっては実行出来ない（？）ものがあるらしい。
IE10 とか Google Chrome はそんなの関係なく実行してくれているのだが、IE9 はこの DOCTYPE を忠実に守っていたらしい。なので、IE9 だけ座標と画像サイズの決定が出来ず、表示されなかったと言うことのようだ。
うがー！！！ いつもアバウトな IE がなんでよりによって DOCTYPE 見てんのよ！！

というわけで、DOCTYPE をXHTML 1.0 に定義。でもそうすると、table でレイアウトしていた部分が使えない。なのでそこは、全部書き直して、XHTML 1.0 でもちゃんとレイアウトが整うように書き換え。ようやっと、fancybox で表示されるようになった。くそー IE9 めっ、貴様さえいなければ！！
曲はトルコのメタル・バンドらしい。