古いIE(Internet Explorer5.5や6)にて透過PING画像の表示をしたとき・・・、

周りがグレーに表示される。

ワタシは通常使用するブラウザーとして『Google Chrome』を利用しています。
また、WEBサイトの仕様によってはスクリプトの関係上、Chromeが正常に動作しないサイトもあり、IE7なども使用することもある。

まぁ、そんな中・・・、
とある方から先日ご指摘を頂きまして・・・、

『何でロゴのところが灰色なのぉ？』っと・・・、

ココのところ「クロスブラウザー」なんて言葉はすっかり忘れており・・・、
全くノーマークでした(笑)

ちなみに上は、通常見ている(であろうと思っていた)本サイトのロゴ表示。

そして、こちらは対策前にIE6にて表示した本サイトのロゴ表示。

こりゃ、灰色って言われちゃって当然です(笑)

っと言う事で、対策方法を・・・、

「IE PNG Fix 2.0 Alpha 4」より[iepngfix.zip]をダウンロードして、解凍する。

解凍フォルダには10個ほどファイルが入っていますが、必要なのは「iepngfix.htc」だけ。
※その他、詳細を確認するには、各自それぞれのファイルをご確認下さい。

そして、対策したいHTMLページファイルのヘッダ部分に以下のようなソースを記述します。

<style type="text/css">
img, div { behavior: url(./iepngfix.htc) }
</style>

url( この中の部分 ) は、HTMLファイルと同じディレクトリであれば、上記のような記載でOKでしょうし、CMSなんかで使用する場合は絶対パスで記載するとよいかと思います。

(例)
「http://i4u.bz/」のホームディレクトリ(index.htmlと同じ階層)に「iepngfix.htc」を設置する場合
url(http://i4u.bz/iepngfix.htc)

///////////////////////////////////////////////////

ちなみに、「透過のPING画像」とは・・・
※詳細はぜひ、ググって頂きたいのですが・・・、

左側が透過png、　中央が普通に背景をつけたpng、　右側は透過gif

 

顔の絵の部分に影をつけて保存した画像を、それぞれ背景色を変えた所に配置してみました。
上記のように淡色での塗りつぶしであれば、3種類のどの方法でもある程度は対応できますが、グラデーション背景や柄の入った背景の上に画像を配置したときには、透過PING画像がとっても便利です。