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

时间:2015-02-18 10:04:34

标签: html css svg

我遇到了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

提前感谢您的帮助:)

0 个答案:

没有答案