Bootstrap对齐导航栏不能均匀地间隔Internet Explorer上的菜单项

Question

我使用twitter bootstrap 3.1.1并使用nav-justified类进行主导航。除IE11及以下版本外，它适用于所有主流浏览器。 Firefox，Chrome和Safari能够根据内容均匀地分隔出li项目，但在IE中它并没有。有谁知道任何快速修复或指出我正确的方向？我试图避免JS设置宽度，并试图找出一个CSS解决方案。是否有人在bootstrap中使用导航栏出现此问题？

导航在firefox，chrome，safari上正确显示

导航不能均匀地隔开IE11，IE10，IE9或IE8上的菜单项

我举了一个JSFiddle的例子 - http://jsfiddle.net/bGHL4/20/

<ul id="navPrimary" class="nav nav-justified">
                        <li id="navMenus"><a href="/menus/">Menus</a></li>
                        <li id="navOffers"><a href="/offers/">Offers</a></li>
                        <li id="navGallery"><a href="/gallery/">Gallery</a></li>
                        <li id="navBenefitGiftCards"><a href="/benefit-gift-card/">Benefit Cards</a></li>
                        <li id="navReservations"><a href="/reservations/">Reservations</a></li>
                        <li id="navContact"><a href="/contact/">Contact</a></li>
                        <li class="last" id="navEvents"><a href="/events/">Events</a></li>
                    </ul> 

在IE上，福利卡项目与该图库和预订之间有不同的空间。但是在所有其他主流浏览器上，所有导航项之间的间距是一致的。

感谢