WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

IE の互換表示設定と meta タグ

by WebSurfer 2015年2月24日 14:19

先の記事 ブラウザーモードとドキュメントモード で、meta タグ (X-UA-Compatible) に content="IE=edge" を指定すると IE6 ~ IE11 では "the highest standards mode supported by Internet Explorer" になるという話を書きました。

これと IE の互換表示設定(以下の画像参照)のどちらが優先されるでしょうか?

IE の互換表示設定

実際に検証した結果、meta タグの指定の方でした。(検証に使ったのは IE9 です。【2021/7/31 追記】 IE11 バージョン 11.789.19041.0 でも検証しました。他のバージョンは未検証)

上の画像のようにデフォルトでは[イントラネットのサイトを互換表示で表示する(I)]にチェックが入っていますので、あるサイトをローカルイントラネットに登録すると(登録しなくても、ホスト名によっては IE が勝手にイントラネットと判定するケースもありますが)、そのサイトは互換モードで表示されます。

または、上の画像で[追加(A)]ボタンをクリックして[互換表示に追加した Web サイト(W):]に加えても、そのサイトは互換モードで表示されます。

上記の設定のまま、あるページだけは標準モードで表示したい場合、そのページに以下の meta タグを追加すれば "the highest standards mode supported by Internet Explorer" 即ち標準モードで表示されるようになります。

<meta http-equiv="x-ua-compatible" content="IE=edge" />

標準モードでは表示が崩れるなどの理由で互換モードで表示したい場合のみに meta タグを使用してドキュメントモードを指定するのだと思い込んでいましたが、その逆(互換モード ⇒ 標準モード)も可能だったようです。

実は、つい先日 MSDN Forum で教えてもらうまで知らなかったです。(汗)

Tags:

その他

ブラウザーモードとドキュメントモード

by WebSurfer 2014年12月29日 14:56

Internet Explorer (IE) で F12 キーを押して開発者ツールを起動すると、下の画像のようにブラウザーモードとドキュメントモードというメニューが表示されます。これについていろいろ調べましたので、後日役に立ちそうなことを忘れないように書いておきます。

ブラウザーモードの設定

ブラウザーモード

F12 開発者ツールのみで設定が可能なオプションで、IE 自体の動きが選択されたバージョンになります。

例えば、実際に使っているブラウザが IE9 でも、ブラウザーモードで他のバージョンを選択するとそのバージョンの動きになります。

試しに IE9 で[Internet Explorer 8(8)]を選択してみると、サーバーに送信される User Agent は Mozilla/4.0 (compatible; MSIE 8.0; ... というように IE8 のものになりました。(サーバーに送られる User Agent は、IE の互換表示の設定によっても変わってきます。詳しくは下の「2016/3/1 追記」を見てください)

また、<!--[if IE 8]> のような条件付コメントも、ブラウザーモードの選択によって影響を受けるとのことです(未検証です)。

ドキュメントモード

これはレンダリングエンジンのみを変更します。ブラウザーモードの切り替えのように IE 自体の動きは変更しません。

F12 開発者ツールを使う以外にも、(1) meta タグ (X-UA-Compatible) で指定、(2) IE の[ツール(T)]⇒[互換表示設定(B)]、(3) IE のアドレスバー右横の互換表示ボタン (IE11 では無くなった) で設定可能です。

ただし、IE9 で試した限りですが、上記の (2) と (3) では[Internet Explorer 7 標準(7)]相当になり、IE8 や Quirks モードを選ぶというようなことはできませんでした。

Quirks モードというのは IE6 で導入された旧バージョン(ということは IE5 以前のはず)のブラウザーと同じようにページが表示されるモードです。CSS の IE 独自実装である expression 関数が使えるのが Quirks モードです。

その他

IE10 以降では条件付コメントはサポートされなくなったそうです。

Conditional comments are no longer supported (条件付きコメントがサポートされなくなった)

IE10 以降では Quirks モードの既定の動作が修正されているそうです。

Interoperable (HTML5) quirks mode (相互運用可能な (HTML5) Quirks モード)

IE11 以降ではエッジモードが使われており、ドキュメントモードは廃止される可能性があるとのことで、将来的には切り替えることができなくなる可能性があるようです。ただし、現時点では F12 開発者ツールや meta タグ (X-UA-Compatible) での設定は可能な様子です。

Compatibility changes in IE11 (IE11 の互換性の変更点)

Web制作者は注意! Internet Explorer 11で変更された「互換性」

meta タグ (X-UA-Compatible) で指定する content="IE=7" とか content="IE=EmulateIE7" の違いは、以下のページが参考になると思います。

Defining document compatibility (ドキュメント互換性の定義)

Specifying legacy document modes

上の後者の記事によると、以下のように edge を指定した場合、IE6 ~ IE11 では "the highest standards mode supported by Internet Explorer" になるとのことです。

<meta http-equiv="x-ua-compatible" content="IE=edge" />

ただし、この先 meta タグで X-UA-Compatible は無視されるという話もあります。

"living" Edge ドキュメント モード

一体何を信じたら良いのかって感じですが、とにかく X-UA-Compatible でドキュメントモードを古いものに指定するようなことをしなければ今後も問題が起こることはなさそうです。

------- 2016/3/1 追記 -------

サーバーに送られる User Agent は、ブラウザモードの設定だけでなく、IE が互換表示するサイトと認識すると旧バージョンのものになるようです。

IE9 で試してみましたが、[ツール(T)]⇒[互換表示設定(B)]で表示されるダイアログで、要求するページのサイトが[互換表示に追加した Web サイト(W):]に含まれている場合とか、[すべての Web サイトを互換表示で表示する(E)]にチェックを入れた場合は IE7 の UA が Web サーバーに送られます。

[イントラネット サイトを互換表示で表示する(I)]にはデフォルトでチェックマークが入っているので要注意ですね。

Tags:

その他

submit せずに IE の Auto Complete に登録

by WebSurfer 2011年7月23日 14:09

IE にはオートコンプリートという機能があって、TextBox に前回入力した文字列を入力中に補完してくれます(Firefox など他のブラウザにも同等の機能がありますが、今回は IE に限った話です)。

IE のオートコンプリート機能

TextBox に入力した文字列が IE のオートコンプリートに登録される条件は、その TextBox が form の中にあって、form が submit タイプのボタン(例: <input type="submit" ... )のクリックで submit されることです。

button タイプのボタン(例: <input type="button" ... )の onclick 属性にスクリプトを設定して、そのスクリプトで form を submit しても、オートコンプリートには登録されません。

詳しくは、マイクロソフトサポートオンラインのページ BUG: AutoComplete Does Not Work When You Use Script to Submit a Form を参照してください。

ただし、上記のページにも出ていますが、AutoCompleteSaveForm Method を利用すると、submit せずにオートコンプリートに登録することができます。

具体的なコード例は以下の通りです。(上記の AutoCompleteSaveForm Method のコードを ASP.NET の TextBox を使って書き換えただけです)

なお、AutoCompleteSaveForm メソッドは IE5 以降のバージョン専用だそうですので注意してください。もちろん、Firefox, Chrome などでは動きません。

<%@ Page Language="C#" %>

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

<script runat="server">
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
  //<![CDATA[
    function fnSaveForm() {
      window.external.AutoCompleteSaveForm(form1);
      document.getElementById("AutoCompleteTest").value = "";
      document.getElementById("AutoCompleteIgnore").value = "";
    }
  //]]>
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    This text is saved: 
    <asp:TextBox ID="AutoCompleteTest" 
      runat="server">
    </asp:TextBox>
    <br />
    This text is not saved:
    <asp:TextBox ID="AutoCompleteIgnore" 
      runat="server" 
      AutoCompleteType="Disabled">
    </asp:TextBox>
    <br />
    <input id="Button1" 
      type="button" 
      value="Save Value" 
      onclick="fnSaveForm()" />
  </div>
  </form>
</body>
</html>

Tags: ,

JavaScript

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar