我遇到了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中的外观:
它在firefox中的外观:
提前感谢您的帮助:)