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 label { pointer-events: none; }