Question

我使用 HTML5 Boilerplate 作为zurb基础 v5.4.6 项目。一切正常，但是当我使用Modernizr v2.8.3 时，下拉导航栏会链接（请参阅附带的图片）。链接应该在悬停上显示。但是，启用Modernizr后，这就是它在这些浏览器上的行为方式：

Chrome v38.0.2125.104 ：即使点击也不会显示
Firefox v31.0 ：点击后显示
IE v11.0 ：点击后显示

所以这些都不是正常的悬停＆＃39;观察到的行为。请帮我详谈。
With Modernizr

Without Modernizr

头：

<meta charset="utf-8">
<title>testapp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/foundation/css/normalize.css"> 
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css"> 
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

身体：

<!--[if lt IE 10]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="top-bar">
  <ul class="title-area">
      <li class="name">
          <h1><a href="#" title="Home">Guitarbaba.in</a>
          </h1>
      </li>
  </ul>
  <section class="top-bar-section">
      <ul class="left">
          <li class="divider"></li>
          <li class="active"><a href="#" title="">Item 1</a>
          </li>
          <li class="divider"></li>
          <li><a href="#" title="">Item 2</a>
          </li>
          <li class="divider"></li>
          <li class="has-dropdown"><a href="#" title="">Item 3</a>
              <ul class="dropdown">
                  <li><a href="#" title="">Sub Item 1</a>
                  </li>
                  <li><a href="#" title="">Sub Item 2</a>
                  </li>
                  <li><a href="#" title="">Sub Item 3</a>
                  </li>
                  <li><a href="#" title="">Sub Item 4</a>
                  </li>
                  <li><a href="#" title="">Sub Item 5</a>
                  </li>
              </ul>
          </li>
      </ul>
  </section>
</nav>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X');ga('send','pageview');
</script>

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

Answer 1

我有同样的问题。对我来说似乎有什么问题（Linux，铬）是在＆＃34; top-bar＆＃34;之后添加data-topbar。导航的类，如下：

<nav class="top-bar" data-topbar>

有关示例，请参阅：http://foundation.zurb.com/docs/components/topbar.html

与Modernizr一起使用时，Foundation / Bootstrap下拉列表无法在Chrome上运行

1 个答案: