Can't style HTML5 elements in IE (despite shiv

2019-08-11 20:53发布

站内问答 / HTML/CSS
493 5 6

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;
}

5条回答
Anthone
2楼-- · 2019-08-11 21:22

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 :)

查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2019-08-11 21:27

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.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
4楼-- · 2019-08-11 21:33

Maybe just try giving it a class?

查看更多
0人赞 添加讨论(0) 举报
傲
5楼-- · 2019-08-11 21:44

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.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
6楼-- · 2019-08-11 21:48

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)