html5shiv 不能在 IE8 中工作？答案

【问题标题】：html5shiv not working in IE8?html5shiv 不能在 IE8 中工作？
【发布时间】：2013-04-09 00:54:41
【问题描述】：

我无法在 IE8 中使用 HTML5 元素获取样式。我搜索了 stackoverflow 和 Google，没有任何我尝试过的建议。

我从一个更复杂的页面开始（我正在将 XHTML 框架转换为 HTML5）并且丝毫不担心，但是在看到模拟和 F12 IE8 标准模式 IE 的零结果之后......这是简单的我无法工作的代码：

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />
        <title>Template</title>
        <style type="text/css">
            header {
                display: block;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <header>
            HTML5 HEADER
        </header>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </body>
</html>

请帮助欧比旺，你是我唯一的希望。

【问题讨论】：

标签： css html internet-explorer-8 html5shiv

【解决方案1】：

将 HTML5Shiv 的 script 元素移动到 head 部分，在所有其他 style 和 script 元素之前。

【讨论】：

确实，这需要先发生。
@Marat：完成了，它可以工作了。这在项目页面上的非常简短的说明中明确说明......但我没有仔细阅读它，也不会想到会出现这种情况 - 我总是在文档底部包含脚本。感谢您的回答，并提醒您阅读文档是猴子与人不同的地方：P
我很高兴在破解我的破解之前找到了这个。

【解决方案2】：

将 shiv 移到样式声明之前。

为了提高现代浏览器的性能，您可能希望对 shiv 使用条件 cmets。

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />
        <title>Template</title>

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

        <style type="text/css">
            header {
                display: block;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <header>
            HTML5 HEADER
        </header>
    </body>
</html>

【讨论】：

【解决方案3】：

我遇到了类似的问题，但我的问题与 IE 条件注释语法有关。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Shim Test</title>

    <style>
        nav ul { font-weight: bold; }
        /* the links wont be bold in IE8 unless the shim is working */
    </style>

    <!--[if lt IE 9] >
    <script src="html5shiv.js"></script>
    <![endif]-->

</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</body>
</html>

您注意到<!--[if lt IE 9] > 中] 和> 之间的空格了吗？我也没有……很长一段时间。删除空间，一切正常。

另外，值得一提的是，HTML5 Shim 项目页面确实表明 shim 需要位于 <head> 中，但它可以位于样式表之后：

"它必须包含在<body> 元素之前（即在<head> 中）但是它出现在 CSS 之前还是之后都没有关系 - 但对于为了性能，包含 CSS 会更有意义首先是这个脚本。”来自https://code.google.com/p/html5shim/

【讨论】：

额外空间？！ 向你挥舞着愤怒的拳头