title: Firefox render fail svg inside inline-block elements
body: <p>i have a problem with Firefox.</p>
  
  <p>I have three anchor tags with svgs in it which I stack up horizontally using <code>display: inline-block;</code> in Chrome, Safari and even Internet Explorer everthing looks fine but in Firefox the anchor Tags have no width which seems to be the Problem.</p>
  
  <p>Here is the Code for it:</p>
  
  <pre><code>&lt;div class="share__icons"&gt;
          &lt;a href="#"&gt;
            &lt;svg class="share__facebook share__icon"&gt;
              &lt;use xlink:href="#svgs-facebook" /&gt;
            &lt;/svg&gt;
          &lt;/a&gt;
          &lt;a href="#"&gt;
            &lt;svg class="share__twitter share__icon"&gt;
              &lt;use xlink:href="#svgs-twitter" /&gt;
            &lt;/svg&gt;
          &lt;/a&gt;
          &lt;a href="#"&gt;
            &lt;svg class="share__mail share__icon"&gt;
              &lt;use xlink:href="#svgs-share-mail" /&gt;
            &lt;/svg&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>.share__icons {
    position: absolute;
    left: 0;
    bottom: 0;
   }
  
  .share__icons a {
    display: inline-block;
    margin-right: 10px; 
   } 
  
  .share__icon {
   max-width: 58px;
   max-height: 58px; 
  }
  
  .share svg {
   fill: currentColor; 
  }
  </code></pre>
  
  <p>and two images </p>
  
  <p>how it looks in chrome:</p>
  
  <p><a href="http://mhrwg.li/1gEZA" rel="nofollow">http://mhrwg.li/1gEZA</a></p>
  
  <p>how it looks in firefox:</p>
  
  <p><a href="http://mhrwg.li/X7ks" rel="nofollow">http://mhrwg.li/X7ks</a></p>
  
  <p>Thank you in advance for your help :)</p>