SVG圖像精靈在IE9不工作，10

Question

這不只是在IE 9 & 10個問題，但像5.1.7

還舊版本的Safari我想用SVG圖像的精靈，它看起來可以使用所有最新版本的Chrome，Firefox和IE，但在IE 9 & 10上，它會使圖像看起來很扁，並且不會顯示正確的大小。

請在IE 9，IE 10或Safari 5.1.7中查看此JS提琴：http://jsfiddle.net/NGSM3/3/以查看此問題。我想繼續爲此使用圖像精靈，但想要將它們更新爲SVG圖像精靈。

我的HTML：

<ul class="svg-nav"> 
    <li> 
     <a><span class="item1"></span></a> 
    </li> 
    <li class="selected"> 
     <a><span class="item2"></span></a> 
    </li> 
    <li> 
     <a><span class="item3"></span></a> 
    </li> 
    <li> 
     <a><span class="item4"></span></a> 
    </li> 
</ul> 

我的CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 

.svg-nav{ 
    background: #fff; 
    display: block; 
    width: 415px;  
    list-style: none; 
} 
    .svg-nav li{ 
     float: left; 
    } 
     .svg-nav a{ 
      border-right: 1px solid #eee; 
      cursor: pointer; 
      display: inline-block; 
      padding: 9px 35px 6px 35px; 
     } 
     .svg-nav li:last-child a{ 
      border-right: none; 
     } 
     .svg-nav li a:hover, .svg-nav .selected a{background: #ddd;} 
      .svg-nav li a span{ 
       background-image: url("http://www.endpop.co/svg-test.svg"); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    display: inline-block; 
    height: 33px; 
    width: 33px; 
    background-size: 133px 66px; 
} 
     .item1{ background-position: 0 0; } 
     .item2{ background-position: -33px 0; } 
     .item3{ background-position: -66px 0; } 
     .item4{ background-position: -99px 0; } 

Answer 1

我經歷了同樣的問題。對我來說，在這個相關問題Background-size with SVG squished in IE9-10中作爲答案建議的解決方案是將width和height屬性添加到我的SVG文件中的svg元素。