Site theme not rendering correctly in Internet Explorer

[inceptionlabs]

I thought I saw this issue addressed elsewhere in the forums, but I can no longer find it.

I am having trouble getting my site to render themes properly in IE9-IE11 (we don't have any systems on versions of IE prior to 9, so I don't know about those...). The site looks great in Chrome, but all of the custom colors defined in the theme break in internet explorer.

Is there a quick way to fix this issue?

Thanks so much!

[matcornic]

No quick way with compatibility issues. It's probably because of css rules and/or dependencies. And the sad thing is I'm on Mac, so I can't test it right now.

You could start by copying here what you saw in IE console ? (maybe there are errors)

[simonwfarrow]

I hit the same issue.

I had to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to partials/header.html as the first child of the head tag. I tried adding it to the custom-header.html but that did not work. According to that link, it must be the first child of head.

The fix is detailed here: https://stackoverflow.com/questions/6156639/x-ua-compatible-is-set-to-ie-edge-but-it-still-doesnt-stop-compatibility-mode

[McShelby]

This issue is exclusivly related to Internet Explorer.

The "latest" version is IE11 released in 2013. In terms of the web, this is ancient but in some environments still necessary (eg. in our company). If you have to use this prehistoric browser, use this version! There is no reason to aim any older versions only because some business and budget guy hassles to invest into your environment. More sooner than later even your environment will switch to a modern (evergreen?) browser.

Therefore let's derive the scope: This issue is exclusivly related to Internet Explorer 11.

This beast needs a whole bag filled with subissues to be solved before your site - well - is at least readable. Let's tackle them one by one:

1. Your page displays correctly accessed thru the internet and on localhost but not if you use an intranet address or servername.

   Eg. if you start a hugo server --bind 0.0.0.0 and access it by http://myhugoservername:1313/ you'll see a mess.

   This is because IE11 needs the above said X-UA-Compatible setting set as an HTTP header by your webserver.

   For the above example you can add the following snippet to your config.toml

   [server]
     [[server.headers]]
       for = "**.html"
       [server.headers.values]
          X-UA-Compatible = "IE=edge"
   

   For all other webservers please look up the appropirate documentation.

   So, nothing this theme could further help you here.

2. Adding X-UA-Compatible to the HTML header.

   I haven't found a case were this was really necessary. Especially if the previous topic was tackled.

   If you could provide a scenario where this may help you, please feel free to submit a PR.

3. Your theme displays in the standard (currently) purple logo background, although you've configured a different color setting

   This is because IE11 doesn't support CSS variables.

   I think, this should not be handled by the theme. If you need to support IE11 feel free to include a custom CSS file to set the colors in traditional way (that's what we did).