首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >正确实现HTML5shiv?

正确实现HTML5shiv?
EN

Stack Overflow用户
提问于 2015-01-21 01:43:48
回答 1查看 1.1K关注 0票数 0

在花了一段时间设计一个网站之后,我决定我至少需要让它在IE9和更低的地方可以查看。我遵循了以下网站的例子:

https://github.com/aFarkas/html5shiv

但没有结果。

以下是其中一个站点页面在最新浏览器中的外观:http://gyazo.com/10a74b651a216d76bb677d335fa1551d

下面是它在IE9和下面的内容:http://gyazo.com/8541b263b9ed43e9d7dea9c33eafb22b

然而,奇怪的是,主页看上去很好,只是其他的页面而已。

我将这段代码实现到我所有html页面的头上:

代码语言:javascript
复制
<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
<![endif]-->

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

并将这个CSS代码添加到我的样式表中:

代码语言:javascript
复制
/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

即使这样做了,如果我不是瞎子的话,我相信这是正确的,IE9和以下并不能很好地显示这个站点。

任何建议都将受到极大欢迎。

谢谢。

EN

回答 1

Stack Overflow用户

发布于 2016-01-07 17:29:26

我相信你已经想好了,查理,但如果你还没有,我会试试这些东西.

首先,关于css:

代码语言:javascript
复制
/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

应该在之前包含↑,然后再使用↑。通常,您不需要这样做,因为HTML5shiv已经添加了这些样式,但是对于一些旧的浏览器或禁用javascript的浏览器,您可以添加这些样式。在我看来,预先将normalize.css包含在您的<head>中比较容易。

同时,确保HTML5shiv被添加到头部(最好是在末尾)。如果它在页面加载后加载到页脚中,则可能会引起类似您描述的问题。

您的代码应该如下所示:

代码语言:javascript
复制
<!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页面上找到,如果仍然存在问题,应该报告它为这里。此外,确保您使用的是最新版本的脚本。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28058259

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档