这是一个转贴SVG作为背景图像,跨浏览器兼容性
由于我觉得我没有得到答案,因为我的问题模棱两可,所以我再次发布这个。
我有一个问题,即 svg 精灵的偏移量(背景位置)在不同浏览器中不同。显然,偏移量需要针对不同的浏览器进行调整。即
//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 偏移进行调整。
通常,对于同一浏览器的理智精灵中的不同背景图像,偏移量是不同的。有没有更简单的方法?
因此,经过一些尝试和试用,发现需要为您的后台 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;
}