久しぶりに、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とかでやることになるのかもです。めんどくさいですね(ぼそっ
コメント