html5shiv not working in IE8?

css html internet-explorer-8 html5shiv

18,552

Solution 1

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

Solution 2

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>

18,552

Author by

danjah

I'm a front-end developer in love with Javascript & CSS. I work for a Learning & Social platform company called Totara learning Solutions, our team is based in New Zealand, with some folk in the UK and US. My background is traditional website development and advertising (booo shaaame), education has morally made up for that though! Stackoverflow is the nuts.

Updated on June 15, 2022

Comments

danjah almost 2 years

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.

Travis J about 11 years

Indeed, this needs to happen first.
danjah about 11 years

@Marat: Done, and it works. This was clearly stated in the very short instructions on the project page... but I didn't read it thoroughly, and wouldn't have figured this to be the case - I always include scripts at the bottom of a document. Thanks for the answer, and reminder that reading documentation is what sets monkeys apart from people :P
danjah over 10 years

Extra space?! shakes an angry fist with you
Admin about 10 years

I am glad I found this before I cracked my had a few times.