Snow-Materia > 互換モード対策


本文

前書き

Win+IEでは文書の先頭に!DOCTYPE以外のものを書くと、例え <?xml version="1.0" encoding="utf-8"?> などであっても、 互換モード になってしまいます。
!DOCTYPEXHTML 1.1XHTML 1.0 Strictと宣言しててもです。

互換モードだと何が悪いかって、 カススタイラーにとって一番嫌なのは、 CSSのwidthの範囲に、 padding値 と border-width値 を含んでしまう、ってことだろうかと思います。 他のブラウザでは含まれません。これが標準なのです。 あとデフォルトの font-sizesmallだとかw

それへの対処として、いままでは p { width:37em; padding:1em; } * > p { width:35em; } と、IEで使えないセレクタを使ってみたり、 p { width:35em !important; width:37em; padding:1em; } と、IEでは !important としてても 同じ指定ブロックに同じ名前があればそっちを優先する というバグを利用したりしていたかと思います。

でもそれらはIEに働きかけるものではなく、 他のブラウザをどうにかしてるもので、他にも問題点もいくつかありました。 今回はIEだけに働きかけるものとすることができます。

サンプル

ソースコード

/* compatible */
p {
    padding: 1em:
    width: 35em;
    width: expression('37em');
}

備考

これだと、IE以外では不明なプロパティとして無視されます。 これでWin+IEでもぴったり合うと思います。

ただ、JavaScriptをOffにすると元に戻っちゃうので、 ハッキリ言ってこの用途には使えないです。

underscore-hack

また、以下のように書くのが 一番ラクチン確実でかなりオススメです。

/* compatible */
p {
    padding: 1em:
    width: 35em;
    _width: 37em;
}

underscore hackというワザみたいです。

属性(上で言えばwidth)の前に _(アンダースコア)をつけるもの。
Mac+IE は、名前の先頭のアンダースコアを無視する、というのがあって、 これでも属性として認識しちゃうみたいです。げら。

Mac+IE にはたぶん効かないのですが、 もともとMac+IEは、XHTMLが標準モードなので、効かないほうがいいし(笑)
他のブラウザでも不明な属性として無視され続けることでしょう。

そんなわけでこのワザを推しておきます。
まあ、バグ技ですし、Validではない書き方なことは確かですが。

ページ情報
関連
目次
公開
2005.01.11