Firefox在内联块元素内渲染失败的svg

Question

我遇到了Firefox的问题。

我有三个带有svgs的锚标签，我在Chrome中使用display: inline-block;水平堆叠，Safari甚至Internet Explorer everthing看起来很好但在Firefox中，锚标签没有宽度似乎是问题。

以下是代码：

<div class="share__icons">
        <a href="#">
          <svg class="share__facebook share__icon">
            <use xlink:href="#svgs-facebook" />
          </svg>
        </a>
        <a href="#">
          <svg class="share__twitter share__icon">
            <use xlink:href="#svgs-twitter" />
          </svg>
        </a>
        <a href="#">
          <svg class="share__mail share__icon">
            <use xlink:href="#svgs-share-mail" />
          </svg>
        </a>
    </div>

和css

.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; 
}

和两张图片

它在chrome中的外观：

http://mhrwg.li/1gEZA

它在firefox中的外观：

http://mhrwg.li/X7ks

提前感谢您的帮助：）