Ссылка на ярлык Internet Explorer не работает

Question

Я создаю сайт с базой Foundation Zurb. У меня есть боковая навигация, которая отлично работает в каждом браузере, кроме 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; }