Question

我在使用modernizr脚本时遇到了一个恼人的问题。此脚本应该允许Internet Explorer为新的HTML 5标记设置样式，但在我的代码中，标题标记是样式化的，但文章标记不是。如果我使用带有“文章”ID的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>

Answer 1

将article { display: block; }添加到您的CSS中。您可以将CSS的第一行更改为：

header, footer, nav, section, article { display: block; }

这将解决问题。

Answer 2

我认为你使用的是错误的库。

“Modernizr不会向浏览器添加缺少的功能;相反，它会检测功能的本机可用性，并为您提供一种方法，无论浏览器的功能如何，都能保持对您网站的精细控制。” http://www.modernizr.com/

如果您对能够对Modernizr做什么感兴趣，ALA会有一篇关于如何有效使用它的明确文章：http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

请阅读其他问题的最佳答案：HTML5shiv vs Dean Edwards IE7-js vs Modernizr - which to choose?

我认为 html5shiv 库可能更适合您的问题。

使用modernizr javascript库设置文章HTML5标记的问题

2 个答案: