IE7和IE8不会将CSS应用于HTML5

Question

I've been struggling to get HTML5 tags to work on IE7 & IE8. 我一直在努力使HTML5标签可在IE7和IE8上运行。 Finally I have used html5shiv.js and the problem was solved. 最后，我使用了html5shiv.js并解决了问题。 The elements displays on screen as they are displayed on any modern browser. 元素在任何现代浏览器中显示时都显示在屏幕上。

But for now, I don't know why IE7 & IE8 won't apply the css rules I have declared. 但是现在，我不知道为什么IE7和IE8不会应用我声明的CSS规则。 For example: 例如：

header
{
    background-color: #000000;
}

Does not apply black background color to the header tag nor any background color. 请勿将黑色背景色应用于标题标签或任何背景色。 When I search for that declarations on IE7 & IE8 it appears to be undeclared, but when I try IE on IE9 mode, that same css rule I have declared do appear and styles the element with black background color. 当我在IE7和IE8上搜索该声明时，似乎未声明，但是当我在IE9模式下尝试IE时，出现了我声明的同一css规则，并使用黑色背景色设置了该元素的样式。 Any help or solutions will be really appreciated. 任何帮助或解决方案将不胜感激。

Answer 1

Unable to reproduce. 无法复制。 Using http://browserstack.com , I tested the code below in both IE7 and IE8 running natively on Windows XP, and both of them applied the CSS as expected, properly: 使用http://browserstack.com ，我在Windows XP上本地运行的IE7和IE8中测试了以下代码，并且两者均按预期正确地应用了CSS：

I can only suspect that you missed something, somewhere, and as such were not getting the results you were expecting. 我只能怀疑您在某处错过了某些东西，因此没有得到您期望的结果。 Try reducing your project to a small test case, as I have done here. 像我在这里所做的那样，尝试将您的项目缩减为一个小的测试用例。 Be sure that you have referenced all of your appropriate dependencies. 确保已引用所有适当的依赖项。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML5 Elements in IE7/8</title>
        <!--[if lt IE 9]>
            <script src="html5shiv.js"></script>
        <![endif]-->
        <style type="text/css">
            header {
                background-color: #000000;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <header>Hello, world!</header>
    </body>
</html>

Screenshot: 屏幕截图：

在此处输入图片说明

Answer 2

Hope this helps you, 希望这对您有帮助，

All Browsers Render HTML5 Mark-up Correctly – Even IE6: 所有浏览器正确呈现HTML5标记-甚至IE6：

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/ http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/

Thanks. 谢谢。

Answer 3

When you want to have a cross-browser way to style these elements while still retaining their semantic meaning, you could wrap each of them in a div and apply the CSS to that div as a class. 如果您想以跨浏览器的方式设置这些元素的样式，同时又保留它们的语义含义，则可以将每个元素包装在div中，然后将CSS作为类应用于该div。 Most use-cases for semantic markup don't need styles anyway - their primary purpose is to convey those informations to machines which is conveyed to humans through the CSS styling. 语义标记的大多数用例无论如何都不需要样式-它们的主要目的是将这些信息传递到通过CSS样式传递给人类的机器。

Answer 4

well you have to check header area like 好，你必须检查标题区域

if you add some comments before 如果您之前添加一些评论

<!DOCTYPE html>

then also you get the issue like css class missing or attributes 然后你也会遇到像CSS类缺失或属性这样的问题

IE7和IE8不会将CSS应用于HTML5

问题描述

4 个解决方案

解决方案1
1 已采纳 2012-12-21 23:47:02

解决方案2
1 2012-12-22 05:49:24

解决方案3
0 2012-12-21 23:52:55

解决方案4
-1 2013-01-05 23:29:35

IE7和IE8不会将CSS应用于HTML5

问题描述

4 个解决方案

解决方案1 1 已采纳 2012-12-21 23:47:02

解决方案2 1 2012-12-22 05:49:24

解决方案3 0 2012-12-21 23:52:55

解决方案4 -1 2013-01-05 23:29:35

解决方案1
1 已采纳 2012-12-21 23:47:02

解决方案2
1 2012-12-22 05:49:24

解决方案3
0 2012-12-21 23:52:55

解决方案4
-1 2013-01-05 23:29:35