body {
background: gray;
font-family: sans-serif;
width: 960px;
margin: auto;
}
header {
background: green;
border: 10px solid black;
}
nav {
margin-top:10px;
background: #62D99C;
border-radius: 10px;
padding: 10px;
}
Header and nav background does not work in IE8. It does work in Chrome and FF. What should I do? Thanks!
You should apply display:block
to the header and nav elements:
header {
display: block;
background: green;
border: 10px solid black;
}
nav {
display: block;
margin-top:10px;
background: #62D99C;
border-radius: 10px;
padding: 10px;
}
It seems you also need to include the following js:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
The reasons for this can be found here:
http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
Put simply, IE8 doesn't support HTML5 elements by default, but by having this javascript execute (only for IE8 or less) it starts to recognise those elements. Most developers use some form of html5 shim
to fix this.
http://code.google.com/p/html5shim/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With