1

我正在尝试从我拥有的 SVG spritesheet 制作一堆图像链接，但我遇到了 Chrome、Safari 和 Firefox 之间的跨浏览器问题。我有一堆这样的标签：

<a href="#" id="twitter-logo" class="socialIcon"></a>
<a href="#" id="facebook-logo" class="socialIcon"></a>

然后在我的css中，我为所有这些设置了背景图片

.socialIcons{
    background-image: url('../img/social.svg');
    width: 60px;
    height: 60px;
    display: inline-block;
}
#twitter-logo{background-position: 0px 0px;}
#twitter-logo:hover{background-position: 0px -200px;}
#facebook-logo{background-position: -79px 0px}
#facebook-logo:hover{background-position: -79px -200px;}

这在 Firefox 和 Safari 中都可以正常工作，但在 chrome 中，SVG 文件似乎比其他文件高 2 个像素。这意味着我的图标顶部比我的顶部低 2 个像素<a>，并且我的图标从边缘被切断 2 个像素。为了解决这个问题，我可以从每个背景位置 y 值中减去 2，但是我遇到了问题，因为它们现在在 Safari 和 Firefox 中是错误的。

这种神秘的转变从何而来？

4

2 回答 2

1

我刚刚遇到了同样的问题。在我们的 SVG 中，高度设置为 165.745px。一旦我将这些值更新为 166px，所有浏览器中的一切看起来都正确。

因此，它似乎源于浏览器如何将浮点数舍入为整数的差异。这与尝试在响应式布局中使大量基于百分比的元素相互浮动的问题是一致的……Chrome/IE 往往会添加一个或 2 个像素，而 FF 有时不会。

于 2016-05-06T18:20:22.377 回答
0

我现在找到了一个解决方案，Chrome 和 IE 的 y 位置相同，而 firefox 和 safari 的 y 位置相同。

Firefox 无法读取 IE 和 Chrome 可以的“background-position-y”。所以像这样修复它：

背景位置：-177px -70px；//firefox 修正 y 位置

背景位置-y：-72px；

IE 和 Chrome 会读取最后一行并覆盖第一行的 y 值，我还没有找到任何其他修复方法。

干杯

爱德华多

于 2014-05-14T13:02:03.823 回答