Wanna make your website IE 10 compatible? Did you just find out hat IE 10 is not longer supporting conditional comments? Read on…

So as we were developing a website, we found that certain elements of our design didn’t quite work with Internet Explorer 10.  It took us like 10 minutes to write CSS compatible with IE 10. However after we added the IE 10 CSS inside conditional comments, we realized that it was not working at all. We did a little research and we realized that such comments are being completely ignored by Microsoft’s web browser simply because it is supposed to be ‘the best web browser in the world’.

Yeah, you can’t get anything right Microsoft!!

We found some ‘solutions’ that didn’t work or used outdated JQuery calls. One ‘solution‘ was looking promising, but it never worked. As I was going through the comments on that solution’s page, we decided to write a better solution that we and everybody else could easily use without any hassle.

What’s the solution?

Simple, we resorted to PHP in order to detect the user agent. Take a look:

 

  • <?php
  • if (stripos($_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 10′)) {
  • ?>
  • <link rel=”stylesheet” type=”text/css” href=”../css/ie_10_style.css” />
  • <?php
  • }
  • else {
  • ?>
  • <link rel=”stylesheet” type=”text/css” href=”../css/style.css” />
  • <?php
  • }
  • ?>

 

Note: This has to be located inside the headers.

First, you have to detect if the web browser is Internet Explorer 10. If it is, apply your custom IE 10 css file. After that you put an else statement, where you apply the CSS that is for any web browser. If you don’t do this, IE 10 will drop the previous CSS and use the non IE 10 compliant CSS.

So far, this is the best ‘hack’ or solution available for applying a different CSS for IE 10. If you need help with this, just drop a comment and we will try to help you!

Related Posts
Comments
  • iconMatrix

    Great hack, going to bookmark this for later,

    Steve

Leave a Comment

8480878690_a329d4a414_oPicture 2
http://www.swsocialweb.com/wp-content/uploads/2014/11/
http://www.swsocialweb.com/test/language/overrides