CODEWITHSUNDEEP
csswordpressinternet-explorer-8modernizr
Jando
Jando

Reputation: 359

Modernizr loads but no change in IE8

I am trying to add Modernizr into my wordpress installation. I do that by adding the following line, just after wp_head(); in the header:

<script src="<?php bloginfo('template_directory'); ?>/js/modernizr-custom.js"></script>

According to firebug the script is loaded, but the script doesn't seem to have effect in IE8.

I've added the following line into my css:

.borderradius body {
  background: #c00;
}

In firefox the background turns red, in IE8 nothing happens.

article, aside, details, figcaption, figure, footer, header, main, nav, section are set on display: block;

What else could I possibly do to get it working in IE8?

Thanks a lot for your time.

Upvotes: 0

Views: 349

Answers (1)

Astockwell
Astockwell

Reputation: 1536

You need the HTML Shim to get HTML5 elements to work in <=IE8. Include that script before any others, preferably in your <head>. The next one you'll need is a media query/matchMedia polyfill, which mediaqueries.js will work fine, I've also had luck with respond.js. Lastly if you want CSS3 support for things like border-radius, you'll need a polyfill like CSS3 Pie, including the .HTC file it comes with for legacy IE support.

Here's an example of my starter boilerplate <head>, which is heavily based on HTML5 Boilerplate (it doesn't including CSS3 Pie):

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

    <link rel="stylesheet" type="text/css" media="all" href="css/screen.css" />
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

Upvotes: 2

Related Questions