[internet-explorer] How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

I am coding a Frontend which works well in IE7 Standards Mode and IE8 Standards Mode.

When I start up Internet Explorer and load the page both IE7 and IE8 go to Quirks Mode directly. How can I force both IE7 and IE8 to always load the page in Standards Mode?

I have no special meta tags added so far.

Thanks for helping me out

Edit: My doctype and head looks as follows at the moment:

<!DOCTYPE html> 
<html lang="de"> 
<head> 
    <title>...</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <script src="js/html5.js"></script> 

    (...)
</head>

The answer is


It's possible that the HTML5 Doctype is causing you problems with those older browsers. It could also be down to something funky related to the HTML5 shiv.

You could try switching to one of the XHTML doctypes and changing your markup accordingly, at least temporarily. This might allow you to narrow the problem down.

Is your design breaking when those IEs switch to quirks mode? If it's your CSS causing things to display strangely, it might be worth working on the CSS so the site looks the same even when the browsers switch modes.


  1. Using html5 doctype at the beginning of the page.

    <!DOCTYPE html>

  2. Force IE to use the latest render mode

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

  3. If your target browser is ie8, then check your compatible settings in IE8

I blog this in details


This is the way to be absolutely certain :

<!doctype html> <!-- html5 -->
<html lang="en"> <!-- lang="xx" is allowed, but NO xmlns="http://www.w3.org/1999/xhtml", lang:xml="", and so on -->
<head>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/> 
<!-- as the **very** first line just after head-->
..
</head>

Reason :
Whenever IE meets anything that conflicts, it turns back to "IE 7 standards mode", ignoring the x-ua-compatible.

(I know this is an answer to a very old question, but I have struggled with this myself, and above scheme is the correct answer. It works all the way, everytime)


Sadly, they want us to use a tag to let their browser know what to do. Look at this documentation, it tell us to use:

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

and it should do.


Adding the correct doctype declaration and avoiding the XML prolog should be enough to avoid quirks mode.


I know this question was asked over 2 years ago but no one has mentioned this yet.

The best method is to use a http header

Adding the meta tag to the head doesn't always work because IE might have determined the mode before it's read. The best way to make sure IE always uses standards mode is to use a custom http header.

Header:

name: X-UA-Compatible  
value: IE=edge

For example in a .NET application you could put this in the web.config file.

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=edge" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Examples related to internet-explorer

Support for ES6 in Internet Explorer 11 The response content cannot be parsed because the Internet Explorer engine is not available, or Flexbox not working in Internet Explorer 11 IE and Edge fix for object-fit: cover; "Object doesn't support property or method 'find'" in IE How to make promises work in IE11 Angular 2 / 4 / 5 not working in IE11 Text in a flex container doesn't wrap in IE11 How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript? includes() not working in all browsers

Examples related to internet-explorer-8

HTML embedded PDF iframe IE8 issue with Twitter Bootstrap 3 addEventListener not working in IE8 first-child and last-child with IE8 Box shadow in IE7 and IE8 CSS rounded corners in IE8 How to disable Compatibility View in IE Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8? IE8 support for CSS Media Query Opacity of div's background without affecting contained element in IE 8?

Examples related to internet-explorer-7

Box shadow in IE7 and IE8 filter: progid:DXImageTransform.Microsoft.gradient is not working in ie7 document.body.appendChild(i) How do I force Internet Explorer to render in Standards Mode and NOT in Quirks? Online Internet Explorer Simulators IE7 Z-Index Layering Issues Force IE8 Into IE7 Compatiblity Mode How to launch an EXE from Web page (asp.net) clientHeight/clientWidth returning different values on different browsers Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine

Examples related to quirks-mode

Forcing Internet Explorer 9 to use standards document mode How do I force Internet Explorer to render in Standards Mode and NOT in Quirks? Set element width or height in Standards Mode

Examples related to x-ua-compatible

Is it still valid to use IE=edge,chrome=1? "X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do? How to forcefully set IE's Compatibility Mode off from the server-side? How to disable Compatibility View in IE X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode How do I force Internet Explorer to render in Standards Mode and NOT in Quirks? Force IE9 to emulate IE8. Possible?