CODEWITHSUNDEEP
javascripthtmlinternet-explorercross-browsercompatibility
OKie
OKie

Reputation: 53

Conditional X-UA-Compatible content based on user's IE version

Is it possible to configure the erb page to detect IE version and based on that select different compatibility tags, so it should work as:

if user IE=10 then < meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" / >

else

Please don't propose other solutions as I need exactly the logic I described. We have an application which doesn't work in IE10 and all the solutions we tried don't work except and only with IE=EmulateIE9 it works.

Upvotes: 0

Views: 535

Answers (1)

MarkPlewis
MarkPlewis

Reputation: 2410

Does the application work in IE11 or Microsoft Edge? If not, then you could force all Microsoft browsers to emulate IE9 using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">.

If you need to target IE10 specifically, then you should use feature detection, since IE10+ no longer supports conditional comments and user agent sniffing can be unreliable.

Here's a code snippet which identifies the browser by checking for version-specific CSS properties. It's a simplified version of a solution that I found here. I've tested it in IE9, 10, 11 and Microsoft Edge:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Browser Detection</title>
      </head>
      <body>
        <h1>Browser Detection</h1>
        <h2 id="message"></h2>

        <script>
          var message = document.getElementById('message');
          var browser = "Less than IE10 (or not IE at all)";

          if (document.body.style['msTouchAction'] != undefined) {
            browser = "IE10";
          }
          if (document.body.style['msTextCombineHorizontal'] != undefined) {
            browser = "IE11 or higher";
          }
          message.innerHTML = browser;
        </script>

      </body>
    </html>

The above snippet may not work for your purposes because the Javascript gets executed in the body, after the meta tags in the head have already been parsed.

I suppose you could trigger a page redirect for IE10+ browsers and add an argument to the URL, which would prevent the feature detection Javascript from executing the next time (you don't want to create an infinite loop). A quick example:

        <script>
          if (!document.location.search) {
            if (document.body.style['msTouchAction'] != undefined) {
              // Browser is IE10 or higher
              window.location = "http://www.yoururl.com/?ie9mode";
            }
          }
        </script>

An even better solution would be to store the result of the browser detection script in a session variable, so that you wouldn't need to append anything to the URL.

I hope this helps!

Upvotes: 1

Related Questions