html - Zurb Foundation Framework [HTML/CSS] "right-off-canvas-menu"不需要的标签插入

Question

我最近开始使用 Foundation 框架(默认版本 5.5.0)并且我正在使用非 Canvas 菜单。我一直在阅读有关此主题的 Foundation 框架的文档:http://foundation.zurb.com/docs/components/offcanvas.html

问题是出于某种原因，Foundation 将额外的标签插入到我的标记中，这会产生不良结果。具体来说，它会生成几个不需要的标签，其形式如下:

<a class="item right-off-canvas-toggle" href="#" aria-expanded="false"></a>

它在整个页面中插入了该标记的 4 个单独实例，最终在我的 Canvas 外菜单中产生了不希望的结果。

我用来生成此页面的标记如下:

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="middle tab-bar-section">
        <h1 class="title">Sample Page</h1>
      </section>

      <section class="right-small">
        <a id="toggleBottomNavBar" class="menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <div id="bottomNavBar" class="icon-bar four-up bottom-bar">
      <a class="item left-off-canvas-toggle" href="#">
        <i class="fi-torsos-all"></i>
        <label>Contacts</label>
      </a>
      <a class="item">
        <i class="fi-comments"></i>
        <label>Chats</label>
      </a>
      <a class="item">
        <i class="fi-pencil"></i>
        <label>Compose</label>
      </a>
      <a class="item right-off-canvas-toggle" href="#">
        <i class="fi-widget"></i>
        <label>Settings</label>
    </div>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
      </ul>
    </aside>

    <a class="exit-off-canvas"></a>
  </div>
</div>

我也使用了一些自定义 CSS:

.bottom-bar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    margin-bottom: 0px;
}

body, html {
    height: 100%;
    width: 100%;
}

.off-canvas-wrap, .inner-wrap {
    height: 100%;   
}

在检查页面时可以从这个屏幕截图中看到额外的标签:http://i.imgur.com/dpj987V.png

谁能帮我调试这个问题？提前致谢!

Answer 1

以防万一有人想知道，我已经找到了解决方案。这是我在使用 HTML 验证器时发现的一个小错误(而且令人尴尬)。我忘记关闭这些行上的 anchor 标记:

<a class="item right-off-canvas-toggle" href="#">
<i class="fi-widget"></i>
<label>Settings</label>

标记应更改为以下内容:

<a class="item right-off-canvas-toggle" href="#">
<i class="fi-widget"></i>
<label>Settings</label>
</a>

所描述的问题已解决。