0

これは IE 9 および 10 だけの問題ではなく、5.1.7 などの古いバージョンの Safari でも発生します。

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

1 に答える 1

1

私は同じ問題を経験しました。この関連する質問Background-size with SVG squiched in IE9-10の回答として提案された私にとっての解決策は、SVG ファイルの要素にwidth属性heightを追加することでした。svg

于 2014-08-20T13:27:36.073 に答える