PHPでIE 6の後方互換対策

IEネタが続きますが、あまりに感動したので寝ずに書きます。IE6はCSSを自分勝手に解釈しますが、XHTMLもちゃんと読めません。例えば当サイトはXHTML1.1に準拠して構築してますが、お約束としてHTMLファイルの冒頭に

<?xml version="1.0" encoding="UTF-8"?>

と記述する必要があります。ところが、IE6はこれがあると、なんかよくわからないんですけど「後方互換モード」でそのページを読み込みます。するとまあいろんな不具合が出てきて調整事がたくさんできるわけです。ならばXML宣言を書かなければいいとなりそうですが、そうすると他のブラウザで不具合が出かねません。ましてこっちは正しいことをいているのだ！

と憤っても問題は解決しないので、またまた「@Style」さんの記事「IE6に困ったら」を参考にさせていただきました。おっと、これはPHP限定なので、HTMLで構築されている方はご利用できませんのでご了承ください。

といっても僕は以下のコードを、index.phpにコピペしただけです。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ( (ereg("Windows",$ua) > 0) && (ereg("MSIE",$ua) > 0)) {
if (ereg("MSIE 6.",$ua) > 0) {
echo '';
}
} else {
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
}
?>

文字コードは使用されているものに書き換えてください。たったこれだけで、IE6のときのみXML宣言が消えて、それ以外のブラウザのときはXML宣言がきちんと記述されます。これのおかげで通常実現できなかったことができるようになりました。当サイトで一番影響を受けたのは、なんといってもメイン部分のセンタリングですね。今までは変なバランスで左に寄っていたのですが、きちんとセンタリングされてます。

あ、あとMoblogの表示も。CSSでなんとなく写真の様に表示していたのですが、IE6ではpaddingをきちんと解釈しないので、ただの枠線になってました。いまではきちんと写真ぽく表示されているはずです。参考までにそのコードです。

dl#relatedArticle dd.newestMoblog p img.moblogImage {
width: 90px;
margin: 0 3px 3px 0;
padding: 2px;
border-top: 1px solid #666666;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #666666;
background: #ffffff;
color: #000000;
}

写真の周囲にpaddingで余白をつけて、borderで影をつけています。他にも文字サイズとか、センタリングに関すること*1とか、いいことがたくさんあります。おまけに数多くのデザイナーをいらだたせたであろう「widthとpadding」を同時に利用できます。おかげで左右のメニューが適性位置に表示されました。その他詳しいことはこちら「文書型宣言とブラウザでの表示」を参照してください。

Nucleusの場合、index.phpに記述するだけで、おそらく全てのページで実現できます。やっておいて損はしないと思います。おかげさまで「positon: fixed;」以外は、主要なブラウザで見た目を同じにできました。気持ちいいです。

1. *1 - 「margin: 0 auto」が使用可能に！

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]