Post

shadowbox.jsをIE6に対応させる

Posted in Web Creative.

jQuery

以前に書いた「jQuery対応のLightboxライクなメディアビューア – Shadowbox.js」に、「IE6でうまく表示しない」とコメントを頂いた。そういえば、IE6でまともに検証していなかったな･･･と思い、VMWareを起動させて確認してみると、オーバーレイ担当のDivが変な位置で表示される。ページを開きスクロールしない状態では問題ないが、スクロールしてからエフェクトがかかるリンクをクリックすると、明らかにずれて表示する･･･。これはなんとかしなければ！と思い、四苦八苦しながらなんとか修正できたので、その方法をお伝えしよう。多少邪道だけれども･･･。

なぜズレるのか

Summer

IE6でも正常に表示される

Internet Explorer 6は、本当にダメブラウザだ。「死ねば良いのに」と何度思ったことか･･･。まず、今回の不具合の原因はIE6とJavaScript、両方にある。IE6がCSSのプロパティ、positionのfixedをサポートしていないせいで、Shadowbox.jsに、IE6のための特別なコードが挿入されている事が一つの原因で、その部分の不具合が二つ目だ。

JavaScriptにIE6以下のブラウザだけが読み込めるコードを挿入するのは、そう珍しくないが、今回はそこで不具合が起きている模様。スクリプト関係は疎いので細かいことはわからないが、CSS、HTMLのコンフリクトかもしれない。とにかく、このサイトで不具合が出ていることは変わらないので、なんとしてでも修正せねばと、日曜の朝っぱらから、血眼になって解決方法を探しまくった。そこで見つけた！邪道だけど効果的な解決方法を！

目には目を

さっきから口を酸っぱく言っているが、私はコードがほとんどかけない。だが見て考えて繋げることはできる。これはJavaScriptに限らず、PHP、CGI等々、すべてに相当する。しかし、意外とこれだけできれば、世の中渡っていけるもんです。今回はそれをもの凄く痛感した。

まず着目したのが、IE6がposition: fixedを再現できないので、shadowbox.jsが回りくどい作業をしていて、その部分で不具合が起きている事。ここまでは推測に過ぎないが、オーバーレイの表示の仕方から見て、99%間違いないと思い、一つの答えにたどり着いた。

IE6にfixedを認識できるようにしてしまえ！

どこかで、実装させるJavaScriptが配布されていたなーと思い、訪れたのが「doxdesk.com」というサイト。ここで「fixed.js」というJavaScriptが配布されている。

doxdesk.com – fixed.js
http://www.doxdesk.com/software/js/fixed.html

これをIE6以下のバージョンで認識できるように、<head>〜</head>内に読み込ませる。

<!--[if lte IE 6 ]><script type="text/javascript" src="【fixed.js 設置ディレクトリ】"></script><![endif]-->

不要なコードを消去

次に、Shadowboxの不要なコードを消去し、IE6以前のブラウザでもposition: fixedが適応されるようにする。ちなみにコードには「ltIE7」と描かれているので、厳密に言うとIE7以下を対象にしているが、正常に表示することを確認してしたので、気にしなくていいだろう。

shadowbox.jsの、1432行目～1437行目付近をの以下の行をコメントアウト

//　if(ltIE7){//　fix container top & overlay height before showing//　    fixTop();//　    fixHeight();//　    SL.addEvent(window, 'scroll', fixTop);//　}

shadowbox.jsの、1495行目付近の以下の行をコメントアウト

// SL.setStyle(SL.get('shadowbox_container'), 'position', 'absolute');

JavaScript使いすぎで重い

IE6がこの世にあるおかげで、Web業界が特別対応しなければならず、人件費諸々考えると、業界全体でもの凄い損失額に違いない。最近はやっと改心してくれた（偽りか？）らしく、IE8でまともになるという。でも、悪い意味でのサプライズがあるのがマイクロソフトという会社だから、期待しない方が良いかもなぁ。

そういえば、IE6以下のブラウザでこのサイトを見ると、異常に重たいのを改めて実感した。理由は透明PNGを使いまくっているから。わかっているのなら変えろよ、と自分でも言い聞かせているけど、やるとしたら全面リニューアルしないといけない。そのうち頑張ります。そのうち･･･。