header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

html internet-explorer-8 css cross-browser
Martin picture Martin · Mar 20, 2011 · Viewed 60.8k times · Source

I am eager to start using Html5 in particular the <header>/<footer>/<article>/<nav> tags.

What happens if the browser doesn't support these?

Also I need to style these so: For Example: The nav has borders and margins etc. You know standard CSS stuff.

So if I style them using the nav tag then IE7 & IE8 etc are going to ignore this?

Answer

Andrew Tubbs picture Andrew Tubbs · Mar 24, 2011

Place this is the <head> section of your page, before any CSS files are loaded.

<!--[if lte IE 8]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see resig's blog post.

Related questions

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML: <div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS: div { width: 60px; height: 60px; border: 1px …

Read More
IE8 support for CSS Media Query

Does IE8 not support the following CSS media query: @import url("desktop.css") screen and (min-width: 768px); If not, what is the alternate way of writing? The same works fine in Firefox. Any issues with the code below? @import url("…

Read More
IE8 issue with Twitter Bootstrap 3

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8. In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen …

Read More