コンディショナルコメント と 互換モード


コンディショナルコメントとは

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="ja"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="ja"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

みたいなやつのことを言う。
ie だけ css でなんかしたいとか。処理わけたいとかそんな感じ。

互換モード

互換モードというのは ie ブラウザに搭載されているモード。
ie8 で ie7 の仕様で見たいとか。
そんな需要で使われる。

互換モード表示を切りたいとき

<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>

をつければ良い。というのが、一般的な結論。

互換モードしたときの ua の値って?

はい。まぁやってみればよいのだが、ieの ua には
documentModeなる値がある。

ie8 相当なら 8
ie7 相当なら 7

を返す。

<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>

というのは、 この documentMode をできうる最新の値(edge)にするということである(個人的な意見)。

コンディショナルコメント と 互換モードの衝突

さて、では コンディショナルコメント の動きというのはなんなのだろうか?

実は、コンディショナルコメント は ie の documentMode によって分岐される。

つまり

<!DOCTYPE>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="ja"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="ja"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
<head>
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
</head>
....

なんて記述があったとき()。
文書を上から読んでいるとおかしいことに気づく。

X-UA-Compatibl で documentMode を指定する前に、先に documentMode にアクセスしているということになる。

これには注意が必要である。なぜなら、X-UA-Compatibl で指定するまえに、 documentMode の値が固定されてしまうからである。

結論

X-UA-Compatibl を指定しながらも、先方から「表示が崩れている」などの連絡を受けた場合は、コンディショナルコメントを一旦疑ってほしい。