SVG sprite背景位置交叉浏览器变体 [英] SVG sprite background-position crossbrowser variations

问题描述

这是转贴
SVG作为背景图片，跨浏览器兼容性

由于我觉得我没有得到答案，因为我的问题不明确，我再次发布。

我有一个问题，偏移（背景位置）的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 .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; 
} 
  

This is a repost SVG as background Image, cross browser compatibility

Since I feel the I didn't get an answer because my question was ambiguous, i am posting this again.

I have an issue with offset(background-position) of a svg sprite as different in different browsers. Apparently the offset needs to be adjusted for different browsers. i.e.

//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;
}

So this way, adjustments need to be made for Y offset.

And often the offsets are different for different background images in the sane sprite for the same browser. Is there an easier way out of this?

解决方案

So after some hit and trial, found out that one needs to give background-size to your background css. This will lead to the background-position being same for all the browsers.

.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;
}

这篇关于SVG sprite背景位置交叉浏览器变体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！