CSS Archive

IE でボックス要素に margin: 0 auto; を指定しても中央寄せとならない件について、expression をつかって解決してみた。
もちろん valid ではないしそもそも Javascript がオフでは閲覧に支障をきたすようなウェブサイトでなければ使用できないが、僕はこの方法をよく使う。

margin: expression( (function(e){
    var result;
    var ep = e;
    do{
        if(ep.parentNode.className == "container"){
            return "0 "+((document.body.clientWidth - ep.offsetWidth) / 2) + "px";
        }else{
            var ep = ep.parentNode;
        }
    }while(ep.parentNode);
})(this));

解説

上記スクリプトの環境は body 要素の子要素のクラスが container となっている。
要するに自分の親要素のクラスが container ならばウィンドウの width から自分の width を引いた数値を半分にした数値を margin の左右に指定している。
body に直接な場合は if 文で tagName を評価すればよい。

Expression 句

スタイルシート上でスクリプトを実行する。
expression でもイベントオブジェクトは参照可能。
ただ、IE の環境で Javascript をデバッグするには Microsoft office 製品に同梱されている Microsoft Script Editor くらいしか僕は知らないのだけど、これでも内部で呼び出されるためウォッチ式などでウォッチすることはできない。

Firefox が出てモダンブラウザ向けのクライアントサイドスクリプトのデバッグ環境は劇的に進化したと思うのだけど、ウェブで飯を食ってるとモダンブラウザマンセーではやっていけない。
心ひそかに IE でのデバッグ環境の進化を期待していたのだけど、どうやら Microsoft からそういうアレが出たらしい。

Microsoft Expression
とりあえず時間が出来たら評価版をさわってみよう。

もっと細っかい解説

※3/26追記

margin: expression( (function(e){
    ～
})(this) );

この記述を分解して expression をイベントに見立てると

expression = function(e){
    ～
}

みたいな形になります。で、expression の返り値が margin に反映する、と。
(this) で expression にアタッチした function(e){ ～ } を呼び出してるような感じ。
因みにレンダリング時に呼び出しているようなので、呼び出し元の要素はスタイルが適用される要素になるみたい。