Fuzzy Labels When in Links in Dropdown Tabs

Created by: dasmith

I've been using Bootstrap's labels in my tabs, which naturally contain links (surrounded with a tags.) When they are placed in dropdown menus, they appear fuzzy, as if they are being rendered multiple times. If I move them outside of the a tag, they appear on the next line. This is only a problem for the dropdown (popup) tabs.

Here is the code:

<!-- No problem here -->          
<a href="#"> <span class="label important">test</span></a> 

<ul class="tabs" data-tabs="tabs">
  <li class="dropdown" data-dropdown="dropdown">
    <!-- No problem -->
    <a href="#" class="dropdown-toggle">Parent <span class="label important"> 33</span></a>
    <ul class="dropdown-menu">
    <!-- Problem: Wrapping -->
      <li><a href="#">Child 1</a> <span class="label warning">1234</span></li>
    <!-- Problem: Fuzzy Text -->
      <li><a href="#">Child 2 <span class="label important">3456</span></a></li>
  </li>
</ul>

<script type="text/javascript">
    $(function() {
        // load context set tabs
        $(".tabs").tabs();
    });
</script>