Internet Explorer 8でグレースケールフィルターを適用し、PNG画像の黒縁を解消する方法

IE8でフィルターを使用する際の重要なポイント

Internet Explorer 8で複数のフィルター効果（グレースケール変換やグラデーションなど）を同時に適用したい場合、各フィルターを個別のプロパティとして指定すると正常に動作しないことがあります。すべてのフィルターは、1つのfilter呼び出しの中にまとめて記述する必要があります。

基本的なフィルターの記述方法

画像や要素をグレースケール表示にするには、以下のようにBasicImageフィルターのgrayscaleプロパティを「1」に設定します。

progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

CSSでの実装例

実際のスタイルシートには、次のように記述します。

.demo {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)
    progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE8 */
    zoom: 1;
}

コードのポイント解説

• -ms-filter プロパティ： IE8専用のベンダープレフィックス付きプロパティです。旧バージョンの「filter」とは異なり、値全体をダブルクォーテーションで囲んだ文字列として指定する点に注意してください。
• gradient フィルター： startColorstrとendColorstrに完全な透明色（#00FFFFFF）を指定することで、背景を透過状態に保ちます。これにより、透過PNG画像の周囲に黒い縁が現れる問題を回避できます。
• zoom: 1： 要素にhasLayoutを発生させ、フィルターが確実に適用されるようにするための指定です。IE特有のレンダリング不具合を防ぐ定番テクニックです。

このように複数のprogidをカンマではなく連結して1つの文字列内に並べることで、IE8でもグレースケール効果と透過処理を同時に実現できます。