Question

花了一段时间设计一个网站后，我现在决定至少要让它在IE9及以下版本中可以查看。我已经按照以下网站的例子进行了跟踪：

但无济于事。

以下是其中一个网站页面在最新浏览器中的显示方式： http://gyazo.com/10a74b651a216d76bb677d335fa1551d

以下是它在IE9及以下版本中的表现： http://gyazo.com/8541b263b9ed43e9d7dea9c33eafb22b

然而，奇怪的是，主页看起来很好，它只是所有其他主页。

我将此代码实现到我所有html页面的头部：

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

html5shiv.js位于项目目录中名为“js”的文件夹中。

并将此CSS代码添加到我的样式表中：

/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

即使完成了这项工作，我认为如果我没有失明，我认为这是正确的，IE9及以下版本不能很好地显示这个网站。

任何建议都会受到欢迎。

谢谢。

Answer 1

我相信你已经把Charlie弄清楚了，但万一你还没有尝试这些东西......

首先，关于css：

/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

↑这应该包含之前你的其他CSS。通常，您不需要这样做，因为HTML5shiv已经添加了这些样式，但对于某些旧浏览器或禁用了javascript的浏览器，您可以添加这些样式。我认为在<head>预先包含normalize.css更容易。

此外，请确保将HTML5shiv添加到头部（最好是在末尾）。如果在页面加载后它在页脚中加载，可能会导致类似您描述的问题。

您的代码应如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title><meta name="description" content="">
    <!-- CSS Reset -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet">
    <!-- Your site CSS (Optional ) -->
    <link rel="stylesheet" href="css/main.css">
    <!-- HTML5 shim for support of HTML5 elements (added at end of head) -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>

   You content here ....


  <!-- If you use javascript  -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>

html5shiv有一些已知的问题可以在github页面上找到，如果你还有问题，你应该报告它here。另外，请确保使用的是最新版本的脚本。

正确实现HTML5shiv？

1 个答案: