SVG изображение спрайта не работает в IE9 и 10

Question

это вопрос не только в IE 9 & 10, но и более старые версии Safari 5.1.7, как

Я хочу использовать спрайт SVG изображения, и это выглядит отлично подходит ко всем последним версиям Chrome, Firefox и IE, но в IE 9 & 10 изображение выглядит сжатым и не отображается в правильном размере.

Пожалуйста, просмотрите эту скрипту JS: http://jsfiddle.net/NGSM3/3/ в IE 9, IE 10 или Safari 5.1.7, чтобы увидеть проблему. Я хочу продолжить использование спрайтов изображений для этого, но хочу обновить их до спрайта с 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, заключалось в том, чтобы добавитьи height к элементу svg в моем SVG-файле.