SVG精灵背景位置跨浏览器变化答案

【问题标题】：SVG sprite background-position crossbrowser variationsSVG精灵背景位置跨浏览器变化
【发布时间】：2013-09-29 09:55:27
【问题描述】：

这是转发 SVG as background Image, cross browser compatibility

由于我的问题模棱两可，我觉得我没有得到答案，所以我再次发布。

我有一个 svg sprite 的偏移量（背景位置）在不同浏览器中不同的问题。显然偏移量需要针对不同的浏览器进行调整。即

//Chrome Safari
.some{
      background: transparent url('some.png') no-repeat -X1px -Y1px;
      background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px -Y2px;
      width: 53px;
      height: 14px;
      position: relative;
      top: 13px;
      left: 30px;
}
//Mozilla
.some:not(:-moz-handler-blocked){
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px (-Y2+4)px;
}
 /IE9
.ie9 .some {
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px (-Y2+8)px;
}

所以这样的话，需要对Y偏移进行调整。

通常，对于同一浏览器的理智精灵中的不同背景图像，偏移量是不同的。有没有更简单的方法？

【问题讨论】：

这些-X1px -Y1px 不是普通的CSS3，是吗？如果您使用预编译器（SASS、LESS 等），您应该在标签中标记它。

标签： css svg

【解决方案1】：

因此，经过一番尝试和尝试，发现需要为您的背景 css 提供背景大小。这将导致所有浏览器的背景位置相同。

.some{
    background: transparent url('some.png') no-repeat -X1px -Y1px;
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px -Y2px;
    width: 53px;
    height: 14px;
    position: relative;
    top: 13px;
    left: 30px;
    background-size:sizeXpx sizeYpx;
}

【讨论】：