IE10 not applying CSS styles on HTML5's header/footer/nav/main elements outside of JSFiddle. HTML5 quirks mode triggering?

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

Question

I'm having issues with IE10 applying CSS styles I've specified for HTML5 elements (and their children when targeting the child using the HTML5 element tag name in the selector), so I broke it down into a simpler example and put together a simple JSFiddle example to demonstrate the issue, but when I tested the JSFiddle, IE10 decided to apply the styles properly. So, I took the exact source code of the JSFiddle's resulting iframe, and copied it into a file hosted on my server and alas it failed to properly apply the styles once again.

JSFiddle's source:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='/js/lib/dummy.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    header, nav, main, footer {
        display: block;
        background: gray;
        padding: 10px;
        margin: 1px;
    }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    nav ul li {
        display: inline-block;
    }
    nav ul li a {
        color: white;
        text-decoration: none;
        padding: 10px;
    }
  </style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
}//]]>  
</script>
</head>
<body>
  <header>
    <img src="http://placehold.it/300x80&text=Logo" />
</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<main>    
    <p>This is filler content inside the <code>&lt;main&gt;</code> element. The <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code> and <code>&lt;footer&gt;</code> should each have a gray background and be displayed as a block.</p>
</main>
<footer>
    <p>Copyright &copy; 2013, All Rights Reserved</p>
</footer>
</body>
</html>

What's the deal with IE10? It can't possibly be the code, since it works fine in an iframe, or do iframes get the same treatment as their parent page?

What's causing IE10 to trip up here? Could it possibly be something server related? That doesn't make much sense, but this is an odd one.

Naturally, any fixes would surely be appreciated.

Was it helpful?

Solution

According to the Developer tools it's running in IE8 mode on your server. Try adding this code to your <head> tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

You can also set this on your server:

Apache:

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
</IfModule>

OTHER TIPS

Your web server has an "X-UA-Compatible" header set to "IE=8", which forces IE to IE8 document mode. You need to either remove it or set it to "edge". If you don't have access to server settings you could try adding modernizr to your page which should allow you to style HTML5 elements in older IEs.

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