max-width/heightが使えない。IEの互換モードではまる

 CSSのmax-width、max-heightが効かない。「互換モードでは効かない、使えない」というのは調べている最中でみつかった。IEの開発者ツール(F12で出るやつ)で確かめながらやっていたのだけれども。
 既存のページにいろいろ手を加えている最中の話。JavaScript、jQueryでCSSを操作したりしてたのだけれども、どうもうまくいかない。互換モードが発動してないかを開発者ツールで見ながら、気になる部分を削ったり、書き換えたり。いったんはうまくいったと思ったら、時間をおいてみたらだめだったり。また、どこが問題かがわからなくなる。
 はまった理由は、開発者ツールのドキュメントモードが、リロードもスーパーリロード(Ctrl+F5)でも自動では切り替わらないからだった。ウィンドウ(またはタブ)を閉じて、再度ページを表示した時点で、HTMLの記述に従ってドキュメントモードが変わるということに気づく。がーん。リロードだけじゃ再認識してくれないのか。
 で、これがわかった時点で問題はすぐに解決。けっきょく、DOCTYPE宣言に問題があるということがわかった。Quirksモードがどういうものかとかもあらためて調べてみたり。知ってる人には当たり前のことだろうけど、このへん、あまり気にしたことがなかった。どっかで見かけた記述方法をずっと正しいと思って実に6年くらい放置していたのだった。ブラウザのバージョンが変わるとHTML記述の常識も変わるということだろう(適当な認識)。
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
 としていたのを
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
 として解決。ほかの部分を変えずに解決するのに、これが一番手っ取り早かったということで。正しい理解かどうかはまったく自信がないけど、とりあえず、これで。
 参考にした記事とか、調べている途中でいろいろ教えてもらったのは以下。メモしきれてないやつもあるけど、とりあえず、履歴から見つかったやつだけ。

 まだまだ勉強が必要だ。

コメント