サンプルコード

例えば、こんなコード。

<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とtest-hover.pngは透過PNGです。
IE6では当然透過されずに背景がグレーになります。

IE7,8では綺麗に表示されている様子ですが…

$(".test").css( "opacity", "0.5" );

このようにfilterのopacityを弄ってやると、下記の画像のような状態になります。キタナイ。

DD_belatedPNGはどうか

上記の現象はalphaImageLoaderを使えば解決出来るのですが、
alphaImageLoaderはhover時の処理が面倒だったり、遅かったりと問題もあります。
そこで去年ぐらいからもてはやされているDD_belatedPNGを使ってみましょう。

DD_belatedPNG: Medicine for your IE6/PNG headache!

DD_belatedPNGは他の透過PNG用ライブラリと異なり、
alphaImageLoaderを使わずにVMLで透過を実現しているのが特徴。
パフォーマンスも比較的上々のようです。

IE8でエラーが出る

が、困ったことにIE6向けのライブラリであるが為か、
IE8で走らせようとするとエラーが出ます。
今回のお題はIE6～8全てに関わる物なのですが、困りました。

jQuery移植版を使用する

探してみたところ、DD_belatedPNGをjQueryプラグインとして移植した記事を発見。
そこらへんの問題も解決してくださったみたいです。素晴らしい！

該当記事

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた | プログラマ気分

リポジトリ

wakuworks/jquery.belatedPNG – GitHub

jquery.belatedPNG.jsで試してみよう

jquery.belatedPNG.jsは、
jQueryオブジェクトにfixPng()メソッドを提供します。
こんな感じにしてみる。

$(".test").fixPng().css("opacity","0.5");

opacityを設定しても汚くならない！素晴らしい！

マウスイベントが効かなくなる問題

ただ、このままだとa要素に対するマウスイベントが効かなくなってしまう模様。
CSSで設定した:hoverのスタイルも適用されず、
クリックしてもウンともスンともいいません。

なので、子要素に「透明な何か」を入れてあげる事で解決を試みます。 例えば透過Gif。

<a href="#" class="test">
    <img src="trans.gif" width="128" height="128" alt="Foobar" />
</a>

これでマウスイベントがきちんと効くようになりました。
hoverのスタイルも適用されます。

もしくは、同サイズの透明要素を中にappendしてやったり。

var $test = $(".test");

// opacityに非対応なブラウザに適用
if( !$.support.opacity ){
    $test.fixPng()
    .append(
        $("<span>").css({
            display : "block",
            width : $test.width(),
            height : $test.height(),
            backgroundColor : "#ffffff",
            opacity : 0,
            cursor : "pointer"
        })
    );
}

$test.css( "opacity", "0.5" );

まとめ

jQueryのプラグインでfadeIn/fadeOut等を使うとopacityが弄られますが、
その影響でこの不具合に遭遇する事があるので注意したいですね。

マウスイベントの件は、他に良い解決策あったら知りたいです！

1. ざっくりとした仕掛け
2. IE兄弟はinput要素のtype属性をいじれないらしい
3. textとpasswordを並べて表示/非表示をトグルする
4. コード抜粋

ざっくりとした仕掛け

チェックボックスにチェックを入れると、
パスワードのtypeがtextに切り替わって内容が確認出来るようになる仕組み。

type直接いじれば楽じゃーん。
そう考えていた時代が僕にもありました。

IE兄弟はinput要素のtype属性をいじれないらしい

ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。
その為jQueryでも、attr()で同様の処理を行おうとすると、以下の例外が投げられてきます。

type property can’t be changed

HTML

<input type="password" id="foo" />

JavaScript

try {
    $("#foo").attr("type", "text" );
} catch( e ){
    console.log( e ); // type property can't be changed
}

cloneNode等で複製したオブジェクトでも同様なので、
これを回避する為には手作業で要素の複製を行い、
それでもって元の要素とスワップしなければならないみたいです。面倒ですね！

textとpasswordを並べて表示/非表示をトグルする

面倒なのは回避する事にして、
input[type=text]とinput[type=password]を並べておき
表示/非表示を切り替える方向でやってみます。

1. input[type=text]とinput[type=password]の入力内容を同期させる
2. チェックボックスのON/OFFでそれぞれの表示/非表示を切り替える

コード抜粋

こんな感じになりました。

DEMO ( jsFiddle )

HTML

<input type="password" id="pswd" name="pswd" />
<input type="text" id="pswd-text" name="pswd-text" style="display:none;" />
<input type="checkbox" id="pswd-toggle" name="pswd-toggle" data-for="pswd" />
<label for="pswd-toggle">パスワードを表示する</label>

パスワード（#pswd）の相方となるテキストフィールド（#pswd-text）を非表示にして設置。
チェックボックス（#pswd-toggle）には、data-for属性で対象のID(pswd)を入れておきます。
ちょうど、label要素のfor属性のように。

JavaScript

$.fn.extend({
    togglePassword : function( config ){
        option = $.extend({
            "postfix" : "-text"
        }, config );
        // 入力内容を同期するfunction
        sync = function(){
            var i = this.type.toUpperCase() === "PASSWORD" ?
                this.id + option.postfix :
                this.id.replace( option.postfix, "" );
            $( "#" + i ).val( $(this).val() );
        };
        // 表示/非表示を切り替えるfunction
        toggle = function(){
            if( this.checked ){
                $.data( this, "pswd" ).hide();
                $.data( this, "text" ).show();
            } else {
                $.data( this, "pswd" ).show();
                $.data( this, "text" ).hide();
            }
        };
        this.each( function(){
            var id, pswd, text, check, handlers;
            id = this.getAttribute( "data-for" );
            pswd = $("#" + id );
            text = $("#" + id + option.postfix );
            check = $(this);
            // テキストフィールドのイベント
            handlers = { keyup : sync, blur : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            // チェックボックスのイベント
            $.data( this, "pswd", pswd );
            $.data( this, "text", text );
            $(this).click( toggle );
            // 初期化
            toggle.apply( this );
        });
    }
});

$("#pswd-toggle").togglePassword();

IEスルーするなら恐ろしく短いコードで済みそうですが…残念。

cf) ie7-js – Project Hosting on Google Code

シンプルになったclearfix

念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
（これも内部で条件分岐して頂けると大変幸せだなぁ）

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

そしてこちらがシンプルになったclearfixのコード。

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。

その他のIE9.jsの恩恵

ボックスサイズの計算法の統一化

ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。

first-child, last-childの実現

IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。

HTML5の新要素にも対応してくれる

header/nav/article/section等、HTML5で追加された新要素は、
IE～8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。

ie7-squish.js

別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->

まとめ

IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。