rm /blog

IT系技術職のおっさんがIT技術とかライブとか日常とか雑多に語るブログです。* 本ブログに書かれている内容は個人の意見・感想であり、特定の組織に属するものではありません。/All opinions are my own.*

【HTML】X-UA-CompatibleによるIE互換表示制御と注意点

IE11には「互換表示」というオプションがあって、
ツールバーの「ツール」→「互換表示設定」で互換表示の対象ドメインを指定できる。
互換表示対象になるとIE7相当で画面表示できる(とどこかで聞いた)。
IEはバージョンによってレンダリングの仕方(画面への描画の方法)が違うらしく
互換表示の有無によっていろいろ見え方が変わる。
互換表示の有無に関わらず表示内容を統一する場合、
以下のmetaタグ(以後X-UAと呼ぶ)をいれることでそれを制御できる。

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


のだが、ちょっとした注意が必要である。
以下に実例を示す。


 

 


例えば以下のような簡単なHTMLがあったとする。
■TEST_01_X-UA_NO.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>TEST</title>
		<style>
		<!--
			div.test_area {
				border-color: red;
				border-width: 0.5px;
				border-style: solid;
				margin: 2px;
				padding: 2px;
			}
			div.inner_area {
				border-color: blue;
				border-witdh: 0.5px;
				border-style: dashed;
				margin: 2px;
				padding: 2px;
			}
			p.test_p {
				background-color: lightgreen;
			}
		-->
		</style>
	</head>
	<body>
		<div class="test_area">
			テストです。<br/>
			<div class="inner_area">
				<p class="test_p">なかのテストです。</p>
			</div>
		</div>
	</body>
</html>

赤い実線で囲われた中に青い点線で囲われたエリアをつくり、
中にそれぞれ一言添えるだけの簡単なHTMLである。

これをWin7IE11互換「なし」で表示すると、以下のような表示内容となる。(①とする)

01-X-UA-NO-GOKAN-NO.gif

まあ想定通り。
でもこれを同じ環境下で互換「あり」で表示する(ドメインlocalhostを互換表示対象ドメインに追加する)と、
以下のような表示内容となる。(②とする)

02-X-UA-NO-GOKAN-ARI.gif

なぜだか外側の赤い実線の枠が消える。




さっきのHTMLにX-UAのmetaタグいれてみる。
■TEST_02_X-UA_ARI.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>TEST</title>
		<style>
		<!--
			div.test_area {
				border-color: red;
				border-width: 0.5px;
				border-style: solid;
				margin: 2px;
				padding: 2px;
			}
			div.inner_area {
				border-color: blue;
				border-witdh: 0.5px;
				border-style: dashed;
				margin: 2px;
				padding: 2px;
			}
			p.test_p {
				background-color: lightgreen;
			}
		-->
		</style>
	</head>
	<body>
		<div class="test_area">
			テストです。<br/>
			<div class="inner_area">
				<p class="test_p">なかのテストです。</p>
			</div>
		</div>
	</body>
</html>


で、これをWin7IE11互換「なし」で表示すると、

03-X-UA-ARI-GOKAN-NO.gif

となってこれはX-UAなし互換なしの①と一致。(③とする)

さらにこれを互換「あり」で表示すると

04-X-UA-ARI-GOKAN-ARI.gif

となってこれもX-UAなし互換なしの①
及びX-UAあり互換なしの③と一致。
要するにX-UAをいれると、互換表示の有無に関わらず表示内容が一致する(③=④になる)ことが確認できた。




まとめると…

  互換表示なし 互換表示あり
X-UAなし 01-X-UA-NO-GOKAN-NO.gif 02-X-UA-NO-GOKAN-ARI.gif
X-UAあり 03-X-UA-ARI-GOKAN-NO.gif 04-X-UA-ARI-GOKAN-ARI.gif

というかんじか。




ただ、このX-UAはmetaタグの前にJavascriptが入ってると効果を発揮してくれないらしい。
(個人的にはそんな書き方する方が悪いと思うが)
例えば以下のようなHTMLである↓
■TEST_03_X-UA_ARI_ICHI_HEN.html

<html>
	<head>
		<title>TEST</title>
		<style>
		<!--
			div.test_area {
				border-color: red;
				border-width: 0.5px;
				border-style: solid;
				margin: 2px;
				padding: 2px;
			}
			div.inner_area {
				border-color: blue;
				border-witdh: 0.5px;
				border-style: dashed;
				margin: 2px;
				padding: 2px;
			}
			p.test_p {
				background-color: lightgreen;
			}
		-->
		</style>
		<script type="text/javascript">
		// COMMENT
		function onloadalert() {
			alert('ON LOAD TEST!');
		}
		</script>
		↑metaタグの前にJavascriptを記述する
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	</head>
	<body onload="javascript:onloadalert();">
		<div class="test_area">
			テストです。<br/>
			<div class="inner_area">
				<p class="test_p">なかのテストです。</p>
			</div>
		</div>
	</body>
</html>


Content-TypeとX-UAの前にJavaScriptとStyleタグを配置させた。
Javascriptの動作確認のためにonLoadで呼び出しているが多分ソースコード上に書かれたJavascriptが実際に起動される必要はない(ソースコード上でmetaタグの前に書かれているだけでX-UAの効果は死ぬ)。

これを互換表示させるとやっぱり②のような見栄えになり、X-UAの効果が出ない。↓

99-X-UA-ICHIGA_HEN.gif

ちなみにこのHTMLにはContent-TypeとX-UAの2つのmetaタグが現れるが、
1つでもJavascriptより前の方に出現していればX-UAの効果が出る。
例えばheadタグの直下にContent-Typeを書いておくだけで、X-UAの位置はこのままでもX-UAの効果が出る。
なんだかよくわからんのである。