IE8でtransitionalなページでposition:fixedを使う
前回エントリの書き直し。
IE8では、position:fixedがサポートされている。ただし、これが作用するのはstrictモードのときだけで、transitionalモードのときはposition:fixedが有効にならない。とはいえ、最初からtransitionalで書かれたページ（あるいはサイト）をイチからstrictに書き直すのは大変な労力がかかり、現実的でない。
しかし、IE8でtransitionalで書かれたページでもfixedを使う裏ワザ的な方法がある。
まず、strictモードでしかfixedは有効にならない、と明記されているのだから、素直にstrictを宣言する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
ところが、そうするとレンダリングが崩れてしまうため、以下のmetaタグを追加する。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
このタグは、strictに書かれたページをlooseに解釈してレンダリングするようIEに示唆する。実際はもともとtransitionalで書かれたlooseなページなので、なんの問題もなくレンダリングされる。そしてなおかつstrictディレクティブを宣言しているので、fixedも使えてしまう。
しかし、このままだと他のブラウザで異常が出てしまうので、下記のようにDOCTYPE宣言を2つ続けて書いてみる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
こうすると、IE8ではstrict宣言だけが有効になり、他のブラウザではtransitional宣言だけが有効になる。その結果、IE8でも他のブラウザでもエラーが出ないしレンダリングも崩れない。どのブラウザで見てもfixedが有効になるので、うれしい。
