Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use <code>content=</code><strong><code>"IE=edge,chrome=1"</code></strong> &emsp; Skip other <code>X-UA-Compatible</code> modes</p> <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; -------------------------- </code></pre> <ul> <li><p><strong>No compatibility icon</strong> <br>The IE9 Address bar does not show up the <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/compatibility-view" rel="noreferrer">Compatibility View button</a> <br> and the page does not also show up a jumble of out-of-place menus, images, and text boxes. </p></li> <li><p><strong>Features</strong> <br> This meta tag is required to enable <code>javascript::JSON.parse()</code> on IE8 <br>(even when <code>&lt;!DOCTYPE html&gt;</code> is present)</p></li> <li><p><strong>Correctness</strong> <br> Rendering/Execution of modern HTML/CSS/JavaScript is more valid (nicer).</p></li> <li><p><strong>Performance</strong> <br> The <a href="https://en.wikipedia.org/wiki/Internet_Explorer" rel="noreferrer">Trident rendering engine</a> should run faster in its <em>edge</em> mode.</p></li> </ul> <hr> <h2>Usage</h2> <p><strong>In your HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; </code></pre> <ul> <li><code>IE=edge</code> means IE should use the latest (edge) version of its rendering engine</li> <li><a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Making-Your-Pages-Work-With-Google-Chrome-Frame" rel="noreferrer"><code>chrome=1</code></a> means IE should use the <a href="http://en.wikipedia.org/wiki/Google_Chrome_Frame" rel="noreferrer">Chrome rendering engine</a> if installed</li> </ul> <p><strong>Or better in the configuration of your web server:</strong><br> (see also the <a href="https://stackoverflow.com/a/15106164/938111">RiaD's answer</a>)</p> <ul> <li><p><a href="http://en.wikipedia.org/wiki/Apache_HTTP_Server" rel="noreferrer"><strong>Apache</strong></a> as proposed by <a href="https://stackoverflow.com/a/5763610/938111">pixeline</a></p> <pre><code>&lt;IfModule mod_setenvif.c&gt; &lt;IfModule mod_headers.c&gt; BrowserMatch MSIE ie Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie &lt;/IfModule&gt; &lt;/IfModule&gt; &lt;IfModule mod_headers.c&gt; Header append Vary User-Agent &lt;/IfModule&gt; </code></pre></li> <li><p><a href="http://en.wikipedia.org/wiki/Nginx" rel="noreferrer"><strong>Nginx</strong></a> as proposed by <a href="https://serverfault.com/a/418396/106052">Stef Pause</a></p> <pre><code>server { #... add_header X-UA-Compatible "IE=Edge,chrome=1"; } </code></pre></li> <li><p><a href="http://en.wikipedia.org/wiki/Varnish_%28software%29" rel="noreferrer"><strong>Varnish</strong></a> proxy as proposed by <a href="http://lucasr.com/using-varnish-battle-against-grandma-and-tards-aka-ie" rel="noreferrer">Lucas Riutzel</a></p> <pre><code>sub vcl_deliver { if( resp.http.Content-Type ~ "text/html" ) { set resp.http.X-UA-Compatible = "IE=edge,chrome=1"; } } </code></pre></li> <li><p><a href="http://en.wikipedia.org/wiki/Internet_Information_Services" rel="noreferrer"><strong>IIS</strong></a> (since v7)</p> <pre><code>&lt;configuration&gt; &lt;system.webServer&gt; &lt;httpProtocol&gt; &lt;customHeaders&gt; &lt;add name="X-UA-Compatible" value="IE=edge,chrome=1" /&gt; &lt;/customHeaders&gt; &lt;/httpProtocol&gt; &lt;/system.webServer&gt; &lt;/configuration&gt; </code></pre></li> </ul> <hr> <h2>Microsoft recommends <em>Edge mode</em> since IE11</h2> <p>As noticed by <a href="https://stackoverflow.com/users/825757">Lynda</a> (see comments), the <a href="http://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode" rel="noreferrer">Compatibility changes in IE11</a> recommends <em>Edge mode</em>:</p> <blockquote> <p>Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.</p> </blockquote> <p><strong>But the position of Microsoft was not clear.</strong> Another <a href="http://msdn.microsoft.com/library/jj676915.aspx#DCModes" rel="noreferrer">MSDN page did not recommend <em>Edge mode</em></a>:</p> <blockquote> <p>Because Edge mode forces all pages to be opened in standards mode, regardless of the version of Internet Explorer, you might be tempted to use this for all pages viewed with Internet Explorer. Don't do this, as the <code>X-UA-Compatible</code> header is only supported starting with Windows Internet Explorer&nbsp;8.</p> </blockquote> <p>Instead, Microsoft recommended using <code>&lt;!DOCTYPE html&gt;</code>:</p> <blockquote> <p>If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 document type declaration [...]</p> </blockquote> <p>As <a href="https://stackoverflow.com/users/321555">Ricardo</a> explains (in the comments below) any DOCTYPE (HTML4, XHTML1...) can be used to trigger Standards Mode, not only HTML5's DOCTYPE. The important thing is to always have a DOCTYPE in the page.</p> <p><a href="https://stackoverflow.com/users/1400368">Clara Onager</a> has even noticed in an older version of <a href="http://msdn.microsoft.com/en-us/library/jj676915.aspx" rel="noreferrer">Specifying legacy document modes</a>:</p> <blockquote> <p>Edge mode is intended for testing purposes only; do not use it in a production environment.</p> </blockquote> <p>It is so confusing that <a href="https://stackoverflow.com/users/1728403">Usman Y</a> thought <a href="https://stackoverflow.com/users/1400368">Clara Onager</a> was speaking about:</p> <blockquote> <p>The [...] example is provided for illustrative purposes only; don't use it in a production environment.</p> <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=7,9,10" &gt; </code></pre> </blockquote> <p><strong>Well... In the rest of this answer I give more explanations why using <code>content="IE=edge,chrome=1"</code> is a good practice in production.</strong></p> <hr> <h2>History</h2> <p>For many years (2000 to 2008), <a href="http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg" rel="noreferrer">IE market share was more than 80%</a>. And IE <strong>v6</strong> was considered as a <em>de facto</em> standard (80% to 97% market share in <a href="http://www.onestat.com/html/aboutus_pressbox23.html" rel="noreferrer">2003</a>, <a href="http://en.wikipedia.org/wiki/Internet_Explorer#Desktop_Market_share_by_year_and_version" rel="noreferrer">2004, 2005 and 2006</a> for IE6 only, more market share with all IE versions).</p> <p>As IE6 was not respecting <a href="http://en.wikipedia.org/wiki/Web_standards" rel="noreferrer">Web standards</a>, developers <strong>had</strong> to test their website using IE6. That situation was great for Microsoft (MS) as web developers had to <strong>buy</strong> MS products (e.g. IE cannot be used without buying Windows), and it was more profit-making to stay non-compliant (i.e. Microsoft wanted to become <strong>the</strong> standard excluding other companies). </p> <p>Therefore many many sites were IE6 compliant only, and as IE was not compliant with web standard, all these web sites was not well rendered on standards compliant browsers. Even worse, <a href="http://hintsforums.macworld.com/showthread.php?t=111479" rel="noreferrer">many sites required only IE</a>.</p> <p>However, at this time, Mozilla started Firefox development respecting as much as possible all the web standards (other browser were implemented to render pages as done by IE6). As more and more web developers wanted to use the new web standards features, more and more websites were more supported by Firefox than IE. </p> <p>When IE market sharing was decreasing, MS realized staying standard incompatible was not a good idea. Therefore MS started to release new IE version (IE8/IE9/IE10) respecting more and more the web standards. </p> <hr> <h2>The web-incompatible issue</h2> <p>But the issue is all the websites designed for IE6: Microsoft could not release new IE versions incompatible with these old IE6-designed websites. Instead of deducing the IE version a website has been designed, MS requested developers to add extra data (<code>X-UA-Compatible</code>) in their pages.</p> <h2>IE6 is still used in 2016</h2> <p>Nowadays, IE6 is still used <a href="http://marketshare.hitslink.com/report.aspx?qprid=3&amp;qpaf=&amp;qpcustom=Microsoft+Internet+Explorer+6.0&amp;qpcustomb=0" rel="noreferrer">(0.7% in 2016)</a> (4.5% in January 2014), and some internet websites are still IE6-only-compliant. Some intranet website/applications are tested using IE6. Some intranet website are 100% functional only on IE6. These companies/departments prefer to postpone the migration cost: other priorities, nobody no longer knows how the website/application has been implemented, the owner of the legacy website/application went bankrupt...</p> <p>China represents 50% of IE6 usage in 2013, but it may change in the next years as <a href="http://www.canonical.com/content/canonical-and-chinese-standards-body-announce-ubuntu-collaboration" rel="noreferrer">Chinese Linux distribution is being broadcast</a>.</p> <h2>Be confident with your web skills</h2> <p>If you (try to) respect web standard, you can simply always use <code>http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"</code>. To keep compatibility with old browsers, just avoid using latest web features: use the subset supported by the oldest browser you want to support. Or If you want to go further, you may adopt concepts as <a href="http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement" rel="noreferrer">Graceful degradation</a>, <a href="http://en.wikipedia.org/wiki/Progressive_enhancement" rel="noreferrer">Progressive enhancement</a> and <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="noreferrer">Unobtrusive JavaScript</a>. (You may also be pleased to read <a href="https://softwareengineering.stackexchange.com/questions/46716">What should a web developer consider?</a>.)</p> <p>Do do not care about the best IE version rendering: this is not your job as browsers have to be compliant with web standards. If your site is standard compliant and use moderately latest features, therefore <strong>browsers have to be compliant with your website</strong>.</p> <p>Moreover, as there are many campaigns to <em>kill</em> IE6 (<a href="http://www.ie6nomore.com/" rel="noreferrer">IE6 no more</a>, <a href="http://www.webmonkey.com/2011/03/microsoft-kicks-off-campaign-to-kill-internet-explorer-6/" rel="noreferrer">MS campaign</a>), nowadays you may avoid wasting time with IE testing!</p> <h2>Personal IE6 experience</h2> <p>In 2009-2012, I worked for a company using IE6 as the <em>official single browser allowed</em>. I had to implement an intranet website for IE6 only. I decided to respect web standard but using the IE6-capable subset (HTML/CSS/JS).</p> <p>It was hard, but when the company switched to IE8, the website was still well rendered because I had used Firefox and <a href="http://en.wikipedia.org/wiki/Firebug_%28software%29" rel="noreferrer">firebug</a> to check the web-standard compatibility ;)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload