Mid Pass Filterか、非XML宣言か

XHTMLのページデザインで、各ブラウザでの表示の違いをどうするかという事。

W3Cでは、XHTML文書の仕様でDOCTYPE宣言の前にXML宣言をする事を強く推奨されていて、 XMLバージョンの宣言が必須で、キャラクタエンコードは、UTF-8(またはUTF-16)以外の場合は必須であると定義されている。

ところが、IE6.0ではXML宣言がある場合ページの表示が「互換モード」（互換というよりもIE独自な気もしますが。。。） というものになって、表示がおかしくなってしまう。また、 さらに古いブラウザになるとXML宣言自身がページに表示されてしまうという問題もある。

よくあるのがスタイルシートに[ width | height ]と[ padding | border ]した場合にある。

IE6.0（互換モード）の場合
width,height,paddingを同時に指定してもオブジェクトの横幅(縦幅)は、width,heightの指定通りになる。

IE7.0、FireFoｘの場合
オブジェクトの内容の部分に横幅(縦幅)の指定が利き、オブジェクト全体の横幅（縦幅）はwidth+paddingとなる。

そこで、このようなレンダリングの違いによるデザインの補正として「XML宣言しない」とか、「CSSハック」 を使用するといったテクニックが必要になる。

企業サイトなどでは、 ｊｓでUAの違いごとにスタイルシートを振り分けてブラウザごとに最適化されたCSSを読み込ませるといった手法をよく見かける。

また、その他によくある方法としては、DIVにwidth,heightを指定し、その中のPでpaddingを指定するというもの。 width(height)とpaddingが同時に指定されていなければOKというもの。

またIE6以前の古いブラウザなどに関しては、Mid Pass FilterなんかのCSS実装のバグを利用したCSSハックでスタイルシートの指定を分けるといった方法がある。

なんだか、探り出すとまだまだありそうだし、ブラウザの更新で、対応されてしまったり。 いろいろと面倒くさそうですが、まとめてきちんと整理しておこうと思う。

じゃあの。