IEでPNG画像が黒く縁取りされてしまいます。

質問

私のサイトにスムーズスクロールで矢印画像をを設置しております。

背景は透明のpng画像（矢印）です。

添付の画像を参照していただきたいのですが、
chromeやFirefox、IE９では、矢印画像はそのまま正常に表示されます。
しかし、IE８（多分IE７でも）で確認すると、矢印が黒く縁どられて
表示されてしまっております。

CSSに下記の記述をしましたが、解決いたしませんでした。
border: 0px;
border-style:none;
background-color:transparent;

画像自体が四角くふちどられるわけではなく、
なぜ矢印が縁どられるのか原因がわかりません。

IEで縁どられず、そのまま表示させる方法を教えて頂けませんでしょうか。
どうぞ、よろしくお願いします。

回答No.1

metametamu · ベストアンサー

こういうサイトがありますよ。
http://blog.mach3.jp/2011/02/png-and-opacity-on-explorer.html

お礼

metametamuさん

ご回答ありがとうございます。

教えていただいたサイトから、プラグインを
設置いたしましたが、現象が改善いたしませんでした。

しかし教えていただいたサイトを読んでいましたところ
原因に気がつきましたので、ベストアンサーとさせて
いただきました。

原因ですが（tracer様にも書きましたが）、
私の記述のミスが原因でした。
WordPressを使用しておりまして
WordPress用のjQueryと、GoogleのjQueryを両方
よびだしており、GoogleのjQueryを呼び出す記述を
削除し、WordPressのjQueryのみにした結果
改善されました。
お騒がせし申し訳ございません。

プラグインについて、大変貴重な情報を教えていただき
ありがとうございます。

回答No.2

tracer

下のような感じで、CSSのどこかで画像に透明をかけてませんか？

filter:alpha(opacity=90);

pngに対して透過を設定すると、古いIEでは黒く縁取られます。
透過設定をやめればいいということになりますね。

ちなみに、透過の設定が仮に100でもだめだと思いますよ。記述自体を消さないと。
filter:alpha(opacity=100);

お礼

tracerさん

ご回答ありがとうございます。
大変勉強になります。

opacityはJavaScript内の記述にございましたが、
削除しても現象が改善されませんでした。
（素人で説明が下手で申し訳ございません）
原因ですが、私の記述のミスがございました。
WordPressを使用しておりまして
WordPress用のjQueryと、GoogleのjQueryを両方
よびだしており、GoogleのjQueryを呼び出す記述を
削除し、WordPressのjQueryのみにした結果
改善されました。
お騒がせし申し訳ございません。

「opacity」については大変勉強になりました。
ありがとうございました。