在设计网站一段时间后,我决定至少需要让它在 IE9 及以下版本中可见。我遵循了以下网站的示例:
https://github.com/aFarkas/html5shiv
但无济于事。
以下是其中一个网站页面在最新浏览器中的样子: 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 和更低版本也不能很好地显示这个网站。
任何建议都将受到热烈欢迎。
谢谢。
最佳答案
我相信查理你已经想通了,但如果你还没有想通,我会尝试这些东西...
首先,关于 css:
/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
↑ 这应该包含在您的其他 css 的之前。一般来说,你不需要这样做 HTML5shiv
已经添加了这些样式,但对于一些较旧的浏览器或禁用了 javascript 的浏览器,您可以添加这些样式。我认为只包括 normalize.css
更容易在你的<head>
事先。
此外,确保 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>
可以在 github 页面上找到 html5shiv 的一些已知问题,如果您仍然有问题,您应该报告它 here .此外,请确保您使用的是最新版本的脚本。
关于javascript - 正确实现 HTML5shiv?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28058259/