HTML5 Shiv Conflict in IE 7 & 8

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

  •  30-06-2022
  •  | 
  •  

Question

What I'm trying to do I am trying to use HTML5 shiv to alow for HTML5 elements to work in IE. I have used this in two other instances with no problem.

What I'm doing I have included this script in my header immediately after opening my header tag before all other scripts are loaded.

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

I have also included in my CSS the standard display: block style to these HTML5 elements.

What is Happening This however is not working in IE 7 & 8. The elements are not rendered. From what I have read HTML5 Shiv can be pretty strict on its tags. So for example, my tag loads as such:

<html lang="en" jQuery19109983433033032547="1">

My body tag also loads as this:

<body class="sitedefault">

I have kept my version of JQuery loading consistent, have followed other directions I have read pertaiing to HTML5 Shiv as I have in my prior implementations of this but am still hitting this snag. Any help at this point would be incredibly appreciated!

I have also tried hosting the Shiv file locally with no luck.

Here is how the source looks in IE8:

<!DOCTYPE HTML>
<html lang="en" >
<head>
<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/script/respond.min.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/pano-framework.css" />
<!-- Pano-Framework Requirements End //-->

There is plenty of stuff loading after this but that's the first section of my . I am at a complete loss as to why this isn't working.

Update I have found that IE is loading this stylesheet at the very top of my section which could explain this issue:

article {
    DISPLAY: block
}
aside {
    DISPLAY: block
}
dialog {
    DISPLAY: block
}
figcaption {
    DISPLAY: block
}.....

It loads like this:

<style>CSS Stylesheet</style>

I am not sure what is loading this or why it is loading in this spot above the HTML5shiv? Any ideas?

Was it helpful?

Solution 3

So I got this to work but I'm not entirely sure what I changed to trigger the fix. My final code, however it this:

<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://staging.new.informationweek.com/styles/pano-framework.css">
<script src="/script/respond.min.js"></script>
<!-- Pano-Framework Requirements End //-->

The biggest difference I see is my tag pulling in my stylesheet.

I appreciate the help everybody!

OTHER TIPS

Try

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

Also make sure your IE browser mode is not set to Quirks. Hit F12 or go to settings>F12 developer options.

Set Document Mode: Standards

EDIT

Simple HTML5 page with shiv

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <style type="text/css">
body{margin:0 auto;}menu{background-color:gray;text-align:center;margin:0;}header{background-color:silver;text-align:center;margin:0;}article{text-align:center;background-color:#A9A9A9;margin:0;}footer{text-align:center;background-color:silver;margin:0;}section{background-color:#ADD8E6;text-align:center;margin:auto;}    </style>
</head>
<body>
    <menu>&lt;menu&gt;</menu>
    <header>&lt;header&gt;</header>
    <article>&lt;article&gt;</article>
    <section>&lt;section&gt;</section>
    <footer>&lt;footer&gt;</footer>
</body>
</html>

Also make sure to Allow Blocked Content in IE if the message pops up. That is the shiv script.

From the HTML5 Shiv Readme:

Include the HTML5 shiv in the of your page in a conditional comment and after any stylesheets.

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