Question

我在支持IE 10和Chrome的应用上工作。对于背景图像，我们使用svg sprite。我们需要定位图标，我们已经为图像定义了一个公共类，并且还根据图标定义了类。

一旦我们构建了应用程序，我们发现Chrome浏览器的定位很好，对于IE，我们需要根据浏览器编写单独的css修复程序。 HTML

<ul>
<li><a class="pico menu href="javascript:void(0)">Home</a></li>
</ul>

我的CSS看起来像

.pico:after{
  background:('sprite.svg') 0 0 no-repeat;
  background-size: 280px 660px;
  position:absolute;
  content:""
}


.pico.menu:after{
  background-position:-106px 6px;
}

.ie .pico.menu:after{
   background-position:-110px 6px;
}

无论如何都有IE和Chrome的通用样式吗？或者是浏览器的默认行为。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
<g>
    <g>
        <polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229         "/>
    </g>
    <g>
        <polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6         "/>
    </g>
</g>
</svg>

Answer 1

我在这里清理了一些代码。当然，请勿将外部网址用于图像。

在chrome和IE 11和IE 10中测试。两者都将正确显示图像。

.pico::after {
  background: url(http://imgh.us/test_55.svg) 0 0 no-repeat;
  background-size: 280px 660px;
  position: absolute;
  content: "";
  display: inline-block;
  width: 30px;
  height: 20px;
}
.pico.menu::after {
  background-position: -10px -65px;
}
svg {
  border: 5px solid black;
}

<ul>
  <li><a class="pico menu" href="javascript:void(0)">Home</a>
  </li>
</ul>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
  <polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229         " />
  <polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6         " />
</svg>

跨浏览器与SVG背景的兼容性

1 个答案: