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」です。
まず最初に、「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がちゃんと透過されます。
以上です。お試しください。
トラックバック
The trackback URL is "".
再度の質問にもお返事くださるばかりか、
分かりやすく丁寧な記事にしていただき感謝感激です。
tinybeansさまの優しいお心遣いありがとうございます。
また早速試してみたのですが、
どうしてなのか透過になりません…。
iepngfix.htcのファイルはここにあります。
http://allforthebest.rdy.jp/png/iepngfix.htc
手順どおりblank.gifをアップし、iepngfix.htc書換え、
facebox.cssに加えました。
最後のゴールにつきそうでつかない状態ですみません。
お時間ございますときに、ご指摘いただけますと幸いです。
あと一息ですね。見たところ、facebox.cssの最後に記述漏れがあります。
/* add */
#facebox * {
border-style: none;
background-color: transparent;
} /* この行の「 } 」が抜けています */
* html #facebox .tl,
* html #facebox .tr,
* html #facebox .bl,
* html #facebox .br {
behavior: url(http://allforthebest.rdy.jp/png/iepngfix.htc);
}
ここを修正してみてください。さて、うまくいくでしょうか。
お世話になっております。
ついについに透過できました！
tinybeansさまのご指摘通りでした。
毎回、的確なアドバイスありがとうございます。
角丸部分の色の濃さが違っているのが
ちょっと気になるところですが、
ほぼゴール！かもしれません。
なぜか透明度が違う感じですよね…？
うまくいったようで良かったです。
＞角丸部分の色の濃さが違っているのがちょっと気になるところですが、
そうですね。僕もちょっと気になっていたんですが、たぶん角丸部分以外はbehaviorを当てていないから、透過されていなくて色が違うんだと思います。
ただ、ここにbehaviorを当てちゃうと、なぜか完全に透過されてしまうのでダメだったんです。
本当ですね…！
html #facebox .bに当てると消えてしまいました。
ここはこのままでいこうと思います。
もし今後、解決するようなことがありましたら
そのとき教えていただけますと幸いです。
tinybeansさま、この度は誠にありがとうございます！
勉強になることばかりです。
私の初歩的な間違いにも丁寧に対応していただき、
とても嬉しかったです。
これからも拝見させていただきます。
寒くなりましたので、お体には気をつけてお過ごしください。