Can't style HTML5 elements in IE (despite shiv and display:block)

问题

I can't seem to work out what's missing. All the affected elements have display:block

Example style for the header element:

header
{
    width: 923px;
    height: 55px;
    background: #395168;
    margin-top: 25px;
}

回答1:

IE 6-8 doesn't know about the header tag, so that the styles can't be applied to it. To make IE to understand this tag, add the below script in your head section.

<script language='javascript'>
document.createElement('header');
</script>

This would solve your problem.

回答2:

Solved the issue. What i did was that i put the script-link under the stylesheet link and suddenly IE 6-8 applied my styles.

<link rel="stylesheet" href="styles/style.css" type="text/css">

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

Thank you so much for trying to help me :)

回答3:

Maybe just try giving it a class?

回答4:

IE doesn't currently allow styling to be applied to these elements. The way I solve it is by wrapping them in another div:

<div class="header">
    <header>
    </header>
</div>

This isn't great obviously, but it beats any solution that relies on JS as it won't display strangely with JS disabled.

回答5:

Had this problem myself today, upgraded to latest html5shiv code (now moved to Github here: https://github.com/aFarkas/html5shiv), moved the stylesheet above the script link, all elements had display:block set but still no luck styling them...

The I realised I had no doctype declaration in my markup - adding:

<!DOCTYPE html>

solved the problem, all styles now applying correctly - so complete solution:

<!DOCTYPE html>
<html>
    <head>
        <link href="/css/styles.css" rel="stylesheet" type="text/css">
        <script src="/js/html5shiv.min.js"></script>
    </head>
    <body>
        <!-- html 5 markup -->
    </body>
</html>

来源：https://stackoverflow.com/questions/9368971/cant-style-html5-elements-in-ie-despite-shiv-and-displayblock

标签

css

html5

styles

semantic-markup