先日の「facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法」に引き続き、今日も似たようなネタですが、この記事に、次のようなコメントを頂きましたので、その対処法を紹介します。 facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法 - かたつむりくんのWWW ほっとひと安心したところまたひとつ問題が... 調べるとこれも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 - TwinHelixにアクセスし、「Download」のちょっと下にある「iepngfix.zip」をダウンロードして解凍します。
解凍したファイルのうち、今回使用するのは「iepngfix.htc」と「blank.gif」です。
まず最初に、「blank.gif」をサーバーにアップロードしましょう。今回は「/blog/img/common/blank.gif」にアップロードしたとします。
次に、テキストエディタで「iepngfix.htc」を開き、19、20行目当たりに次の1行があると思います。
IEPNGFix.blankImg = thisFolder + 'blank.gif';
ここを次のように、アップロードした「blank.gif」のURLに書き換えます。ここは絶対URLではなく絶対パスでも問題ありません。
IEPNGFix.blankImg = '/blog/img/common/blank.gif';
これで準備完了です。
次に、facebox.cssの最後に次のCSSを加えます。
* html #facebox .tl,
* html #facebox .tr,
* html #facebox .bl,
* html #facebox .br {
behavior: url(/blog/css/iepngfix.htc);
}
これでIE6でもFacebox.jsの角丸の透過pngがちゃんと透過されます。
以上です。お試しください。