为什么 Modernizr 不适合我？答案

【问题标题】：Why isn't Modernizr working for me?为什么 Modernizr 不适合我？
【发布时间】：2011-07-08 13:51:49
【问题描述】：

我不认为modernizr 喜欢我，有人可以告诉我我做错了什么。我似乎无法让modernizr 在firefox 上工作，即等...我只使用页眉、页脚和导航等元素...

这是我的代码：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 lte9 lte8 no-js"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 lte9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="notie no-js"> <!--<![endif]-->
  <head>
    <title></title>
    <meta name="description" content="" />
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 

    <script src="modernizr-2.0.6.min.js"></script>

    <script type="text/javascript" src="http://use.typekit.com/kmy1sfb.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

  </head>

检查萤火虫它输出正常，我得到了我应该得到的所有元素，但没有一个元素工作......

例如，如果我在 firebug 中单击标题并将 CSS 高度编辑为 5000px，它不会移动，对齐等也不正确。

【问题讨论】：

用 Firebug 检查，在脚本面板下你能找到列出的modernizr 库吗？
不知道，可能是很多事情...尝试重新下载modernizer并重新包含它。您是否有这方面的在线示例？
也许尝试刷新您的浏览器缓存。
如果您使用所有这些部分，您还应该使用优秀的 html5boilerplate.com css 来配合它！它已经包含了下面的解决方案。

标签： html css modernizr

【解决方案1】：

您可能忘记将新的 HTML5 元素设置为块级元素。默认情况下，浏览器将任何未知元素视为内联元素 (display:inline)，因此很难对它们做很多事情。

较新的浏览器逐渐将新的 HTML5 元素视为稳定的，这意味着它们开始为它们提供默认样式，例如 header 元素的 display:block。但是，当今市场上的大多数浏览器都没有 HTML5 元素的默认样式，因此您需要提供它们。

这里有一个简单的 CSS 示例：

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

将该 CSS 添加到您的 main.css 应该可以解决您的样式问题。

【讨论】：

【解决方案2】：

我在尝试使用 CDN 时遇到了同样的问题，但它无法正常工作（我的链接可能有误）。我发现的测试是把

.borderradius body {
  background: #c00;
}

在你的 main.css 中，看看背景是否变红。如果是modernizr，则可以正常工作。

编辑：我还发现脚本必须插入 HTML 文档的顶部。按照建议将其放在底部以提高页面加载速度是行不通的。

【讨论】：