IE6にてpngを透過させる IEPNGFIX

2010.12.10

ブラウザ（IE6）により、PNG24を使用した時の透過具合が違う。
そんな時に使えるIEPNGFIXの覚書。

サイトからDownload内にあるiepngfix.zipをダウンロード後、フォルダの解凍を行う。

解凍したフォルダにある、iepngfix_tilebg.jsとiepngfix.htcを任意のフォルダにFTPなどを使用しアップロードする。

<head>~</head>内に記載

<script src="/iepngfix_tilebg.js" type="text/javascript"></script>

アップロードした、iepngfix_tilebg.jsまでのパスを記入します。

CSS

behavior: url(http://~~~~~/iepngfix.htc)

CSSへ先ほどアップした、iepngfix.htcまでのパスを記入

CSSで使用する場合

CSS 例

h3.iepngfix {
  background: url(http://~~~~~/h1.png) no-repeat;
  width: 200px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  text-indent: -9999px;
  behavior: url(http://~~~~~/iepngfix.htc)
}

CSS 例　HTML 記述

<h3 class="iepngfix">インベントリー</h3>

imgで使用する場合

img 例

img.iepngfix { 
　 behavior: url(http://~~~~~/iepngfix.htc)
}

img　例 HTML記述

<img src="パス" width="100" height="100" alt="" class="iepngfix" />

以上の作業でIE6でもpng24を透過させて表示することが可能です。

この記事をシェア

この記事の投稿者

unknown