0
这不只是在IE 9 & 10个问题,但像5.1.7SVG图像精灵在IE9不工作,10
还旧版本的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; }