HTML5 tags breaks styling in IE8

Hi there,

I’m having a strange problem I never bumped into before…
Unfortunately I need IE8 support on one of my Roots websites, so I added the respond.js to my gruntfile which is loaded correctly.

But when testing my website, it looks awful in IE8. The responsive classes work though thanks to respond, but it seems it’s missing a lot of my styling. When I view the source in IE8, it looks normal, but when I look at the source via the Developer Tools in IE8, I noticed the HTML5 markup is broken:

<header class="banner navbar navbar-default navbar-static-top" role="banner"/>
<div class="container">
</header/>
... etc
<footer class="content-info" role="contentinfo"/>
<div class="container">
</footer/>

Some basic styling of my navbar:

.banner {
  margin-bottom:@grid-gutter-width;
  background:none;
  .navbar-header {
    display:block;
    float:none;
    text-align:center;
    .navbar-brand {
      height:150px;
      width:100%;
    }
  }
  .navbar-collapse {
    background:@navbar-default-bg;
    .lt-ie9 & {background:#FFF; }
    .navbar-nav {
      background:transparent;
    }
  }
}

All the styling inside .banner {} is not being applied in IE8 because it closes the HTML5 <header> element right away?

So I checked if Modernizr is being loaded correctly and it is.
What am I missing here, I don’t get it?

Thanks!

If I change scripts.php and load Modernizr in the head section instead of the footer, it does style the elements correctly?

According to the documentation it should be loaded in the head anyway: http://modernizr.com/docs/#installing

Hmm, on further investigation;

On my development server, it only worked if I moved Modernizr to the head by changing line 57 in lib/scripts.php into:

wp_enqueue_script('modernizr', get_template_directory_uri() . $assets['modernizr'], array(), null);

(But I noticed that Modernizr is placed in the head anyway in a production environment)

Somehow on my production server it still didn’t work after a grunt build, so I tried loading the unminified Modernizr version on a production server by changing line 35 inside the roots_scripts() function in lib/scripts.php:

'modernizr' => '/assets/js/vendor/modernizr.min.js',

into:

'modernizr' => '/assets/vendor/modernizr/modernizr.js',

And that does work! Any ideas what might be causing this?
I didn’t have any Grunt errors on compiling the Modernizr with grunt build?

If you’re using the latest version of Roots, grunt build is creating a “special” build based on what you’re putting into your CSS/JS. Maybe that’s not compiling everything you need?

Thanks! I am using the latest version of Roots in this project yes.
How does it determine this “special” build exactly then? It’s skipping my styles defined inside HTML5 elements in my LESS file?

Setting shiv to true in my gruntfile seem to have solved my problem!

modernizr: {
   build: {
        extra: {
          shiv: true
        },
   }
},

Thanks for sharing this solution! I’ll see if I can do some more research on what exactly Modernizer is doing during the build and report back here.