IE Conditionals removing head tag

Apologies, this seems really trivial but is driving me up the bend.

I have the following ie conditionals around my html tag. However in ie9 the head completely disappears meaning css isn't brought among everything else!. This is only happening however on my Forge, Digital Ocean, Lets Encrypt, Cloudflare staging and production site. I have the site set up on an older server still running php7 on webfaction.com and it displays fine in ie9.

As soon as I remove the conditionals the head appears and styles are brought in. I've tried adding the conditionals to the body tag but it looks like the whole body then goes inside a comment.

I've also tried copy and pasting other examples but none of them seem to work here. For example:

https://css-tricks.com/snippets/html/add-body-class-just-for-ie/

But still doesn't work.

This is my head.

<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title')</title>

    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,900" rel="stylesheet">

    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

Does anyone have any idea what it could be?

Thanks

Ralph

ralphmorris

8 years ago

Best Answer

Level 7

Turned out to be Cloudflare HTML auto minify causing the issue. It was removing the last closing endif comment for some reason, completely breaking the site from ie9 and below. I have temporarily disabled HTML auto minify and it is all working again.

I've contacted Cloudflare support also to ask if there is a fix for this.

1 like

Please or to participate in this conversation.