css - Chrome 神秘地将 SVG 位置降低了 2px

Question

我正在尝试从我拥有的 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 像素。这意味着我的图标顶部比我的 <a> 的顶部低 2 个像素。 ，并且我的图标从边缘被切断 2px。为了解决这个问题，我可以从每个背景位置的 y 值中减去 2，但是我遇到了问题，因为它们现在在 Safari 和 Firefox 中是错误的。

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

Answer 1

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

因此，这似乎源于浏览器将 float 舍入为整数的方式不同。这与尝试在响应式布局中将大量基于百分比的元素相互 float 的问题是一致的……Chrome/IE 往往会添加一个或两个像素，而 FF 则不会。