Question

我正在尝试做什么 我正在尝试使用HTML5 shiv来让HTML5元素在IE中工作。我在其他两个实例中使用过这个没有问题。

我正在做什么 在加载所有其他脚本之前，我在打开标题标记后立即将此脚本包含在我的标题中。

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

我还在CSS中包含了标准显示：这些HTML5元素的块样式。

发生了什么 然而，这在IE 7＆amp; 8.元素不呈现。从我所看到的HTML5 Shiv可以非常严格的标签。例如，我的标签加载如下：

<html lang="en" jQuery19109983433033032547="1">

我的身体标签也会加载：

<body class="sitedefault">

我保持我的JQuery加载版本一致，遵循其他方向我已经阅读了与HTML5 Shiv相关的内容，就像我之前的实现一样，但仍然遇到了这个问题。在这一点上的任何帮助将非常感激！

我也试过在本地托管Shiv文件而没有运气。

以下是IE8中源的外观：

<!DOCTYPE HTML>
<html lang="en" >
<head>
<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/script/respond.min.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/pano-framework.css" />
<!-- Pano-Framework Requirements End //-->

此后有很多东西加载，但这是我的第一部分。我完全不知道为什么这不起作用。

更新我发现IE正在加载这个样式表在我的部分的顶部，这可以解释这个问题：

article {
    DISPLAY: block
}
aside {
    DISPLAY: block
}
dialog {
    DISPLAY: block
}
figcaption {
    DISPLAY: block
}.....

像这样加载：

<style>CSS Stylesheet</style>

我不确定是什么加载这个或为什么它在HTML5shiv上方的这个位置加载？有什么想法吗？

Answer 1

尝试

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

还要确保您的IE浏览器模式未设置为Quirks。点击F12或转到设置＆gt; F12开发人员选项。

设置Document Mode: Standards

修改

带有shiv的简单HTML5页面

<!DOCTYPE HTML> <html lang="en-US"> <head>  <style type="text/css"> body{margin:0 auto;}menu{background-color:gray;text-align:center;margin:0;}header{background-color:silver;text-align:center;margin:0;}article{text-align:center;background-color:#A9A9A9;margin:0;}footer{text-align:center;background-color:silver;margin:0;}section{background-color:#ADD8E6;text-align:center;margin:auto;} </style> </head> <body> <menu><menu></menu> <header><header></header> <article><article></article> <section><section></section> <footer><footer></footer> </body> </html>

如果弹出消息，还要确保IE中的Allow Blocked Content。那是shiv脚本。

Answer 2

来自HTML5 Shiv Readme：

在条件评论中包含HTML5 shiv，在 任何样式表后。

Answer 3

所以我让这个工作，但我不完全确定我改变了什么来触发修复。我的最终代码，不过这样：

<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://staging.new.informationweek.com/styles/pano-framework.css">
<script src="/script/respond.min.js"></script>
<!-- Pano-Framework Requirements End //-->

我看到的最大区别是我的标签在我的样式表中拉动。

我感谢大家的帮助！

IE 7中的HTML5 Shiv Conflict＆amp; 8

3 个答案: