72

How can I force Internet Explorer 9 to use standards document mode? I built a website and I'm finding that IE9 uses quirks mode to render the website pages. But I want to use standards mode for rendering.

DavidRR
  • 18,291
  • 25
  • 109
  • 191
MaxRecursion
  • 4,773
  • 12
  • 42
  • 76

9 Answers9

128
 <!doctype html>
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

This makes each version of IE use its standard mode, so IE 9 will use IE 9 standards mode. (If instead you wanted newer versions of IE to also specifically use IE 9 standards mode, you would replace Edge by 9. But it is difficult to see why you would want that.)

For explanations, see http://hsivonen.iki.fi/doctype/#ie8 (it looks rather messy, but that’s because IE is messy in its behaviors).

DavidRR
  • 18,291
  • 25
  • 109
  • 191
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 11
    This doesn't work if your content is loading into an iframe and the parent window doesn't have a doctype specified. It will follow apply the quirks mode to the iframe as well. I hate microsoft. Also here is a link to a microsoft site talking about this answer. http://msdn.microsoft.com/en-us/library/ie/hh920756(v=vs.85).aspx – teewuane May 13 '13 at 15:36
  • It also doesn't work if you have content besides the `DOCTYPE` declaration before the `HTML` tag. – crush Aug 20 '13 at 18:42
  • 1
    This answer was correct awhile ago, but now that IE10 is out this will render in that and in the future will render whatever the newest IE is. See SuperDuck's answer below to render in IE9 explicitly. – DrCord Aug 30 '13 at 20:25
  • This has no effect on my 64-bit copy of IE9 (version 9.0.8112.16421). ("HTML1115: X-UA-Compatible META tag ('IE=8') ignored because document mode is already finalized.", regardless of where the meta tag is located in the document) – 15ee8f99-57ff-4f92-890c-b56153 Oct 09 '13 at 15:09
  • ...must call Response.AddHeader() (stuck w/ classic ASP in this case) or whatever equivalent. Who knows what'll happen with IE10, IE9 on anybody's desktop but mine, or anything else... – 15ee8f99-57ff-4f92-890c-b56153 Oct 09 '13 at 15:15
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

The meta tag must be the first tag after the head tag or it will not work.

Ty Petrice
  • 1,769
  • 1
  • 13
  • 7
  • 4
    I always wonder what happens when at some day another meta tag is needed that also must be placed before all others ... – JensG Nov 23 '15 at 15:40
  • You really want to put meta charset as close to the start of the document as possible. I guess both can still fit in small enough count of bytes to work with real world user agents. – Mikko Rantalainen Nov 27 '18 at 14:25
10

There is something very important about this thread that has been touched on but not fully explained. The HTML approach (adding a meta tag in the head) only works consistently on raw HTML or very basic server pages. My site is a very complex server-driven site with master pages, themeing and a lot of third party controls, etc. What I found was that some of these controls were programmatically adding their own tags to the final HTML which were being pushed to the browser at the beginning of the head tag. This effectively rendered the HTML meta tags useless.

Well, if you can't beat them, join them. The only solution that worked for me is to do exactly the same thing in the pre-render event of my master pages as such:

Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
    Dim MetaTag As HtmlMeta = New HtmlMeta()
    MetaTag.Attributes("http-equiv") = "Content-Type"
    MetaTag.Attributes("content") = "text/html; charset=utf-8;"
    Page.Header.Controls.AddAt(0, MetaTag)

    MetaTag = New HtmlMeta()
    MetaTag.Attributes("http-equiv") = "X-UA-Compatible"
    MetaTag.Attributes("content") = "IE=9,chrome=1"
    Page.Header.Controls.AddAt(0, MetaTag)
End Sub

This is VB.NET but the same approach would work for any server-side technology. As long as you make sure it's the last thing that gets done right before the page is rendered.

DavidRR
  • 18,291
  • 25
  • 109
  • 191
David Esquivel
  • 101
  • 1
  • 2
  • I had the same issue, I use DNN in my site (ewwww) and this was the only solution to the problem, all the other assumed you had direct control over the tag in HTML. – Dan Rayson Apr 24 '15 at 15:08
6

put a doctype as the first line of your html document

<!DOCTYPE html>

you can find detailed explanation about internet explorer document compatibility here: Defining Document Compatibility

inancsevinc
  • 2,632
  • 2
  • 17
  • 9
  • @ inancsevinc: My aspx page already had and it was still using IE7 document mode when rendered. So in this sense your suggestion alone did NOT resolve my problem. The trick for me was to add immediately below it as suggested by Jukka K. Korpela. I do appreciate that your sugegstion may be valid, I just don't understand why it alone would not force IE to IE9 mode for me. – leoinlios Mar 19 '13 at 12:01
6

To prevent quirks mode, define a 'doctype' like :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

To make IE render the page in IE9 document mode :

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

Please note that "IE=edge" will make IE render the page with the most recent document mode, rather than IE9 document mode.

DarkWingDuck
  • 2,028
  • 1
  • 22
  • 30
3

Make sure you take into account that adding this tag,

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

may only allow compatibility with the latest versions. It all depends on your libraries

eoinDeveloper
  • 103
  • 1
  • 3
  • 12
0

Make sure you use the right doctype.

eg.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or just

<!doctype html>

and also read and understand how compatibility modes and developer toolbar for IE work and set modes for IE:

Neeraj Kumar
  • 771
  • 2
  • 16
  • 37
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
0

I tried with an alternate method:

Hit F12 key Then, at right hand side in the drop down menu, select internet explorer version 9.

That's it and it worked for me.

Madhu Sareen
  • 549
  • 1
  • 8
  • 20
0

I have faced issue like my main page index.jsp contains the below line but eventhough rendering was not proper in IE. Found the issue and I have added the code in all the files which I included in index.jsp. Hurray! it worked.

So You need to add below code in all the files which you include into the page otherwise it wont work.

    <!doctype html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>