title: Image wrapped in link overlapped by another floating link in Firefox only, Chrome and IE fine
body: <p>I have a navigation bar that is proportionaly scaling its size on page resize:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div id="breadcrumbs"&gt;
          &lt;div class="breadcrumbs-insert"&gt;
              &lt;a href="#"&gt;&lt;img src=
              "http://i.imgur.com/1gLVM1T.png"&gt;&lt;/a&gt;
              &lt;a href="#"&gt;Text 1&lt;/a&gt;
              &lt;span&gt;Text 2&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>#breadcrumbs {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 2.5%;
          letter-spacing: 1px;
          font-size: 0.35em;
          font-family: 'HelveticaNeue-Light', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          background: #0073b5;
          color: #ffffff;
      }
  
      .breadcrumbs-insert {
          position: absolute;
          width: 100%;
          height: 100%;
      }
  
      #breadcrumbs span {
          line-height: 100%;
          height: 72%;
          padding-top: 0.7%;
          float: left;
          display: block;
          padding-right: 2.08333%;
          padding-left: 2.08333%;
          background: #39a9d1;
          color: #ffffff;
          text-decoration: none;
      }
  
      #breadcrumbs a {
          line-height: 100%;
          height: 72%;
          padding-top: 0.7%;
          float: left;
          display: block;
          padding-right: 1.04166%;
          padding-left: 1.04166%;
          color: #ffffff;
          text-decoration: none;
  
      }
  
      #breadcrumbs img {
          height: 100%;
      }
  
      #breadcrumbs a:hover, a:active, a:visited {
          color: #ffffff;
          text-decoration: none;
          background: #39a9d1;
      }
  
      #breadcrumbs a:hover, a:active {
          background: #39a9d1;
      }
  
      #breadcrumbs a:first-of-type {
          margin-left: 1.04166%;
          padding-left: 0.26041%;
          padding-right: 0.26041%;
          height: 100%;
          padding-top: 0;
      }
  
      #breadcrumbs a:last-of-type {
          padding-right: 2.08333%;
      }
  </code></pre>
  
  <p>Here is the fiddle <a href="https://jsfiddle.net/acidonyx/m4ahtuLv/4/" rel="nofollow">https://jsfiddle.net</a></p>
  
  <p>For some reason in Firefox first link wrapping the image is overlapped by the next floating link. Chrome and IE working fine.</p>
  
  <p>Been trying to figure it out for hours now and finally giving up...</p>