facebox.jsの角丸をIE6でも実現する方法

先日の「facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法」に引き続き、今日も似たようなネタですが、この記事に、次のようなコメントを頂きましたので、その対処法を紹介します。

facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法 - かたつむりくんのWWW

ほっとひと安心したところまたひとつ問題が... 調べるとこれもIE6のバグ(未実装)みたいなのですが、 Faceboxの角丸を透過してくれません。 透過pngが透過にならない為のようです。

直したくて「IE PNG Fix 2.0」という 透過PNGサポートライブラリを設定してみました。 ですが、効果が見られません。

というわけで、「IE PNG Fix 2.0」を使った対処法を紹介します。

ちなみに、「IE PNG Fix 2.0」の使い方については、基本的な部分しか書いていませんのであしからず。

IE PNG Fix の準備

まず、IE PNG Fix - TwinHelixにアクセスし、「Download」のちょっと下にある「iepngfix.zip」をダウンロードして解凍します。

解凍したファイルのうち、今回使用するのは「iepngfix.htc」と「blank.gif」です。

iepngfix_01.png

まず最初に、「blank.gif」をサーバーにアップロードしましょう。今回は「http://www.tinybeans.net/blog/img/common/blank.gif」にアップロードしたとします。

次に、テキストエディタで「iepngfix.htc」を開き、19、20行目当たりに次の1行があると思います。

IEPNGFix.blankImg = thisFolder + 'blank.gif';

ここを次のように、アップロードした「blank.gif」のURLに書き換えます。ここは絶対URLではなく絶対パスでも問題ありません。

IEPNGFix.blankImg = 'http://www.tinybeans.net/blog/img/common/blank.gif';

これで準備完了です。

facebox.cssの書き換え

次に、facebox.cssの最後に次のCSSを加えます。

* html #facebox .tl,
* html #facebox .tr,
* html #facebox .bl,
* html #facebox .br {
  behavior: url(http://www.tinybeans.net/blog/css/iepngfix.htc);
}

これでIE6でもFacebox.jsの角丸の透過pngがちゃんと透過されます。

以上です。お試しください。

  • このエントリーをはてなブックマークに追加
Just a second...