IE8とIE7のposition:fixed;にはまる

久しぶりに、IEでドハマリしたので、ここのメモとして残します。

IE7以降では対応しているはずのposition:fixed;が効かない

確かに、対応しているのだけど、そこに大きな落とし穴があります。さすがIEさん(謎)

IE9でもなんか効かないなーと思っていたら、そこは単にブラウザモードが互換表示になっていただけということだったので、何も問題なし。

しかし、IE8で効いていない。なぜだ??バリデータに通しても終了タグが抜けているようなことはなかった。

いろいろ調べたり、聞いたりした結果、DOCTYPEに影響がでているということが分かった。HTML 4.01 Transitionalだとposition:fixed;が効かないらしい!!というか、標準準拠モードになってねー。 たしかに、今回やっているのは、力強くHTML 4.01 Transitional 後方互換モードと宣言されている\(^o^)/オワタ

position:fixed;を効くようにするには、以下のようにするとよい。(システムに組み込まれているなどで、できない場合もあるけど)

HTML 4.01の場合

HTML 4.01 Transitional(後方互換モード)が駄目だというには前述したとおりであるが、Strictだと問題なし。なので、TransitionalからStrictにするというのも手である

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTMLの文法的にはむちゃくちゃであるが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE8ではstrict宣言だけが有効になり、他のブラウザではtransitional宣言だけが有効になる。らしい。

追記:ちょっと変な解釈をしてしまっていたので、あれからいろいろ試したところでまとめると以下のような感じ。

NG - fixedが効かない(Transitional DTDなし、後方互換モード)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

OK - fixedは効く(Transitional DTDあり、標準準拠モード)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0の場合

これは、問題なし。あんたエラい(謎)。当然といえば当然。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01もXHTML 1.0も以下をお忘れなく

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

HTML5

何も問題なかった。あんたステキ(謎)。

<!doctype html>

まとめ

まとめれる内容では、ないのだけど、こういうケースの場合は、DOCTYPEを変えるとすんなりいったりしますが、DOCTYPEを変更できないケースもありますね。そういう場合は、JSとかでやることになるのかもです。めんどくさいですね(ぼそっ

参考