csshtmlinternet-explorerkenticox-ua-compatible

Kentico does not work on IE8


I am using Kentico 8.2 and build a new website with HTML5, new CSS styles, all Bootstrap styles and javascript.

Not surprisingly, many new styles and HTML5 tags don't work on Internet Explorer 9 and lower.

So I tried to add these tags to their "editable" master page header:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

But doesn't work at all and I found that the meta tag has to go to the very top of the page or would not work. And on Kentico, there is no way to put this on the top. There is not-editable fixed header that Kentico always puts on top, like this:

<meta http-equiv="pragma" content="no-cache" />
<link href="/CMSPages/GetResource.ashx?stylesheetname=CorporateSite" type="text/css" rel="stylesheet"/>

Is there anyway to replace this pre-written-by-Kentico header and replace with the compatible meta tag?

Thanks,

J.


Solution

  • I figured it out myself.

    The meta tag, meta http-equiv="X-UA-Compatible" content="IE=edge", should really go to the very beginning of the "head" tag. And Kentico puts all the stylesheet links that you have in their stylesheet modules linked to your site BEFORE the editable heading. This means your meta tag might get shifted down too much in the "head" tag so that it doesn't get recognized.

    So, the workaround is that just build your own css files in some folder and link it yourself in the editable header (obviously after the meta tag) so that Kentico only links one, or maybe two css file links from their CSS styles module. Kentico's default websites have theme css files as well.

    And, of course, put the X-UA-Compatible meta tag in the very front of editable header.