Asked  6 Months ago    Answers:  5   Viewed   16 times

I am doing work for a client who forces compatibility mode on all intranet sites. I was wondering if there is a tag I can put into my HTML that forces compatibility mode off.

 Answers

77

There is the "edge" mode.

<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>My Web Page</title>
   </head>
   <body>
      <p>Content goes here.</p>
   </body>
</html>

From the linked MSDN page:

Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the “lock-in” paradigm. With Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to Edge mode would appear in the highest mode supported by that version; however, those same pages would still appear in IE8 mode when viewed with Internet Explorer 8.

However, "edge" mode is not encouraged in production use:

It is recommended that Web developers restrict their use of Edge mode to test pages and other non-production uses because of the possible unexpected results of rendering page content in future versions of Windows Internet Explorer.

I honestly don't entirely understand why. But according to this, the best way to go at the moment is using IE=8.

Tuesday, June 1, 2021
 
avon_verma
answered 6 Months ago
68

Ended up using http://videojs.com/ to support all browsers.

But to get the video working in IE9 and Chrome I just added html5 doc type and used mp4:

<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>
Thursday, June 3, 2021
 
jab
answered 6 Months ago
jab
86

I found problems with the two common ways of doing this:

  1. Doing this with custom headers (<customHeaders>) in web.config allows different deployments of the same application to have this set differently. I see this as one more thing that can go wrong, so I think it's better if the application specifies this in code. Also, IIS6 doesn't support this.

  2. Including an HTML <meta> tag in a Web Forms Master Page or MVC Layout Page seems better than the above. However, if some pages don't inherit from these then the tag needs to be duplicated, so there's a potential maintainability and reliability problem.

  3. Network traffic could be reduced by only sending the X-UA-Compatible header to Internet Explorer clients.

Well-Structured Applications

If your application is structured in a way that causes all pages to ultimately inherit from a single root page, include the <meta> tag as shown in the other answers.

Legacy Applications

Otherwise, I think the best way to do this is to automatically add the HTTP header to all HTML responses. One way to do this is using an IHttpModule:

public class IeCompatibilityModeDisabler : IHttpModule
{
    public void Init(HttpApplication context)
    {
        context.PreSendRequestHeaders += (sender, e) => DisableCompatibilityModeIfApplicable();
    }

    private void DisableCompatibilityModeIfApplicable()
    {
        if (IsIe && IsPage)
            DisableCompatibilityMode();
    }

    private void DisableCompatibilityMode()
    {
        var response = Context.Response;
        response.AddHeader("X-UA-Compatible", "IE=edge");
    }

    private bool IsIe { get { return Context.Request.Browser.IsBrowser("IE"); } }

    private bool IsPage { get { return Context.Handler is Page; } }

    private HttpContext Context { get { return HttpContext.Current; } }

    public void Dispose() { }
}

IE=edge indicates that IE should use its latest rendering engine (rather than compatibility mode) to render the page.

It seems that HTTP modules are often registered in the web.config file, but this brings us back to the first problem. However, you can register them programmatically in Global.asax like this:

public class Global : HttpApplication
{
    private static IeCompatibilityModeDisabler module;

    void Application_Start(object sender, EventArgs e)
    {
        module = new IeCompatibilityModeDisabler();
    }

    public override void Init()
    {
        base.Init();
        module.Init(this);
    }
}

Note that it is important that the module is static and not instantiated in Init so that there is only one instance per application. Of course, in a real-world application an IoC container should probably be managing this.

Advantages

  • Overcomes the problems outlined at the start of this answer.

Disadvantages

  • Website admins don't have control over the header value. This could be a problem if a new version of Internet Explorer comes out and adversely affects the rendering of the website. However, this could be overcome by having the module read the header value from the application's configuration file instead of using a hard-coded value.
  • This may require modification to work with ASP.NET MVC.
  • This doesn't work for static HTML pages.
  • The PreSendRequestHeaders event in the above code doesn't seem to fire in IIS6. I haven't figured out how to resolve this bug yet.
Sunday, June 27, 2021
 
Hilmi
answered 6 Months ago
60

I had your same issue and researched it fairly extensively back in April 2011. As of then, the only way to have a top-level document in "standards mode" and a document in a child iframe in "quirks mode" in IE9 was to use a meta tag to have the browser behave as if it were IE8. (As far as I know, this is still the case and Microsoft has no intention to change it.) There are a variety of meta tags you can use to change browser mode, but the one I have used that has worked was:

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

If you include this meta tag, all of the documents should be properly rendered (per IE8 rules) according to their doctype.

Note, however, that this precludes you from using any of the newly supported css features in IE9, even in the top-level document. You won't be able to use border-radius, box-shadow, opacity, etc..

There's some more info on this at Will an iframe render in quirks mode?, which asks a more general question about iframes and doctypes in ie.

Thursday, August 5, 2021
 
Gilko
answered 4 Months ago
78

In addition to my comment above, you don't need the html5shiv for IE9, which I'm sure you know.

Chances are there are some HTML problems elsewhere as IE doesn't try and fix things for you the way other browsers do.

The reason that <!--[if lt IE ]> <![endif]--> doesn't work is that you need to remove the lt so that it simply reads <!--[if IE]> <![endif]-->

Based on your reply above regarding the JS file, I'd try:

<!--[if lte IE 9]><script src="js/html5shiv.js"></script> <![endif]-->

And

<!--[if IE]><script src="html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

is wrong. You need to have the http:// in front of the html5shiv.

A link to the website in question would be ideal.

UPDATE I see what's wrong now, you're missing a doctype! Add:

<!doctype html>

to the top of the file and it will be fine.

If no doctype is specified, IE always resorts to Quirks mode (which you never want!)

You also have multiple <head> elements which is wrong. And everything needs to be enclosed in a <html> element.

Actually there's a lot wrong with the markup, you don't even have a <body> element!

Wednesday, August 25, 2021
 
Dimitre Novatchev
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share