html5shiv not working in IE8?

StackOverflow https://stackoverflow.com/questions/15891535

Question

I can't get styles to pick up in IE8 with HTML5 elements. I've trawled stackoverflow and Google, no suggestions I've tried work.

I started with a much more elaborate page (I'm converting an XHTML framework to HTML5) and wasn't concerned in the slightest, but after seeing zero results in emulated and F12 IE8 standards mode IE... here's the simple code I can't get working:

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />
        <title>Template</title>
        <style type="text/css">
            header {
                display: block;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <header>
            HTML5 HEADER
        </header>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </body>
</html>

Please help Obi-Wan, you're my only hope.

Was it helpful?

Solution

Move HTML5Shiv’s script element to head section, before all other style and script elements.

OTHER TIPS

Move the shiv before the style declarations.

To increase performance in modern browsers, you might want to use conditional comments for the shiv.

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />
        <title>Template</title>

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

        <style type="text/css">
            header {
                display: block;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <header>
            HTML5 HEADER
        </header>
    </body>
</html>

I had a similar problem, but my issue had to do with IE conditional comment syntax.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Shim Test</title>

    <style>
        nav ul { font-weight: bold; }
        /* the links wont be bold in IE8 unless the shim is working */
    </style>

    <!--[if lt IE 9] >
    <script src="html5shiv.js"></script>
    <![endif]-->

</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</body>
</html>

Did you notice the space between ] and > in <!--[if lt IE 9] >? I didn't either...for a very long time. Remove the space and everything works great.

Also, it's worth mentioning that the HTML5 Shim project page does say that the shim needs to be in the <head>, but it can come after your stylesheets:

"It must be included before the <body> element (i.e. in the <head>) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script." via https://code.google.com/p/html5shim/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top