[B! 透過PNG] witch-doktorのブックマーク

IEの透過PNG+opacityの不具合を治すメモ - Mach3.laBlog

この記事は賞味期限切れです。（更新から1年が経過しています）透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。サンプルコード例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte

witch-doktor 2011/09/09

リンク

jQueryで、透過pngをIE6に対応させる

jQueryで、透過pngをIE6に対応させる jQuery2008年12月7日 2008月11月現在、IE7の世界におけるシェアは47.39％を占めています。（Net Applicationsより）確実にIE6→IE7への移行は進んでいますが、まだまだIE6は無視できないのが現状です。色々な方が透過pngをIE6でも機能させる方法をご紹介されていますが、実はjQueryのプラグインを使用する事で、あっさりIE6にも透過pngを対応させることができます。「IE7.jsで対応」「iepngfix.js」といった方法もあるにはありますが、前者はちょっと反則的な気がしますし、後者は余計なソースがどんどん増えますし、マニアックなバグの調整作業をしなければならないのが難点です。 jQueryであれば、きちんとブラウザがサポートされているので安心ですし、余計なコードも増えません。（2～3行ほど

witch-doktor 2011/09/08

リンク

IE6用透過png対応策、DD_belatedPNGの使用法と注意点

以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。配布元のDrew Diller’s bl

witch-doktor 2011/09/06

リンク

透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ

cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での角丸、ドロップシャドウを実装するjsライブラリのまとめです。同じ用途でもライブラリによって良し悪しだと思いますので、備忘録的にメモ。 IE6のPNG透過や6、7での角丸、ドロップシャドウを実装するjsライブラリのまとめです。同じ用途でもライブラリによって良し悪しだと思いますので、備忘録的にメモ。もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b