使用 Modernizr javascript 库设置文章 HTML5 标记样式时出现问题
我在使用 Modernizr 脚本时遇到了一个恼人的问题。该脚本应该使 Internet Explorer 能够设置新的 HTML 5 标签的样式，但在我的代码中，标题标签已设置样式，但文章标签未设置样式。如果我使用 ID 为“article”的 DIV 并应用样式，它们是可见的，所以现代化似乎不适用于文章标签？我正在使用 IE 8 来测试这一点。
<!DOCTYPE html>
<meta charset="utf-8"/>
<html class="no-js">
<head>
<title>Title</title>
<script src="~Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<style>
header,footer,nav,section {display: block;}
article, #article {border:1px solid red;}
header {height: 95px;border-bottom: 8px solid #6b6b6d;}
</style>
</head>
<body>
<div class="page">
<header>
LOGO | Title
</header>
<article>
<h2>article element</h2>
</article>
<nav>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<div id="article">
<h2>div with id article</h2>
</div>
</div>
<footer>
footertext
</footer>
An annoying problem I'm having with the modernizr script. This script is supposed to enable Internet Explorer to style the new HTML 5 tags, but in my code the header tag is styled, but the article tag is not. If I use a DIV with the ID "article" and apply the styles, they are visible, so it seems as if modernizr doesn't work for article tags? I am using IE 8 to test this.
<!DOCTYPE html>
<meta charset="utf-8"/>
<html class="no-js">
<head>
<title>Title</title>
<script src="~Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<style>
header,footer,nav,section {display: block;}
article, #article {border:1px solid red;}
header {height: 95px;border-bottom: 8px solid #6b6b6d;}
</style>
</head>
<body>
<div class="page">
<header>
LOGO | Title
</header>
<article>
<h2>article element</h2>
</article>
<nav>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<div id="article">
<h2>div with id article</h2>
</div>
</div>
<footer>
footertext
</footer>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
添加
article { display: block; }添加到你的 CSS 中。您只需将 CSS 的第一行更改为：这就能解决问题。
Add
article { display: block; }to your CSS. You could just change the first line of your CSS to:That will solve the problem.
我认为您使用了错误的库。
“Modernizr 不会向浏览器添加缺失的功能；相反，它会检测功能的本机可用性，并为您提供一种方法，无论浏览器的功能如何，都能保持对站点的精细控制。” http://www.modernizr.com/
如果您对<可以使用 Modernizr 来做，ALA 有一篇关于如何有效使用它的清晰文章：http://www.alistapart.com/articles/take-advantage-of-html5-and-css3-with-modernizr/
请阅读顶部回答另一个问题： HTML5shiv 与 Dean Edwards IE7-js vs Modernizr - 选择哪个？
我认为 html5shiv 库可能更适合您的问题。
I think you're using the wrong library.
"Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities." http://www.modernizr.com/
If you're interested in what you can do with Modernizr, ALA has a clear article on how to effectively use it: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
Please read the top answer to this other question: HTML5shiv vs Dean Edwards IE7-js vs Modernizr - which to choose?
I think the html5shiv library might be more fitting to your issue.