html - Internet Explorer 标签链接不起作用

Question

我正在使用 Zurb 的 Foundation 框架构建一个站点。我有一个侧面导航，它在除 IE 之外的所有浏览器中都可以正常工作(当然)。在 IE 中，如果您尝试单击边栏链接，如果您尝试单击文本则不起作用。如果单击文本或图标周围的框，它就会起作用。我猜这与 IE 处理 <label> 的奇怪方式有关标签，但我不确定如何修复它。任何人都知道我应该怎么做才能使链接正常工作？

Here is a fiddle.

<!-- Sidebar Navigation -->
<div class="sidebar left clearfix">
    <div class="icon-bar vertical five-up label-right left clearfix">
      <a class="item" id="home">
        <i class="fa fa-home fa-2x fa-fw"></i>
        <label>Home</label>
      </a>
      <a class="item" id="resources">
        <i class="fa fa-folder-open fa-2x fa-fw"></i>
        <label>Resources</label>
      </a>
      <a class="item" id="reports">
        <i class="fa fa-pie-chart fa-2x fa-fw"></i>
        <label>Reports</label>
      </a>
      <a class="item" id="team">
        <i class="fa fa-users fa-2x fa-fw"></i>
        <label>Team</label>
      </a>
      <a class="item" id="support-tickets">
        <span class="notification-container">
            <i class="fa fa-envelope fa-2x fa-fw"></i>
            <span class="notification-counter">1</span>
            <label>Support Tickets</label>
        </span>
      </a>
      <!-- These Last 2 Items to Be Displayed Only On Certain Pages as Necessary -->
      <a class="item" id="director-info">
        <i class="fa fa-shield fa-2x fa-fw"></i>
        <label>Director Info</label>
      </a>
      <a class="item" id="merge-accounts">
        <i class="fa fa-compress fa-2x fa-fw"></i>
        <label>Merge Account</label>
      </a>
    </div>
</div>
<!-- End Sidebar -->

我应该提一下，如果我删除 <label> 它显然有效标记，但随后我的 CSS 变得一团糟。想知道是否有更简单的修复方法。

Answer 1

我在使用基础图标栏时遇到了同样的问题。

尝试使用指针事件:像这样在你的标签上没有

.item 标签 {
指针事件:无；
}