辻本龍太

LABO

2010年 02月  4日

IE6にてpngを透過させる IEPNGFIX

javascrit

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

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

解凍したフォルダにある、iepngfix_tilebg.jsiepngfix.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を透過させて表示することが可能です。

  • はてなブックマークに登録はてなブックマーク登録数
  • Yahoo!ブックマークに登録
  • Googleブックマークへ登録
  • この記事をクリップ!
  • IE6にてpngを透過させる IEPNGFIXをPOOKMARK Airlinesに追加
  • この記事をBuzzurlにブックマーク
  • この記事をdeliciousにブックマーク
  • IE6にてpngを透過させる IEPNGFIXをニフティクリップに追加