作为背景图像的SVG无法在IE9中正确显示

Question

我使用SVG文件作为HTML元素的背景。它适用于所有主流浏览器。问题是我的网站还需要在Internet Explorer 9中正常工作和查看。在IE9中，SVG背景始终是＆＃34;移动＆＃34;在右边切割，如下所示：

上面的元素是模态的紧密链接。关闭链接的结构和样式：

HTML

<a href="#" class="aq-modal-close"></a>

CSS

.aq-modal-close {
        display: block;
        width: 12px;
        height: 12px;
        background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
        background-size: 12px 12px;
        float: right;
        margin-top: 5px;
    }

SVG文件比它应该大，所以我使用background-size进行调整。其他SVG以相同的方式使用。什么想法可能是错的？同样，这只发生在IE9中。

Answer 1

您可以使用负值添加背景位置： DEMO

.close {
    display: block;
    width: 52px;
    height: 52px;
    background: url('image.svg') no-repeat 0 0 scroll;
    background-size: 52px;
    background-position: -10px 0px;
    border: 1px solid black;
}

Answer 2

正如@zeidanbm在上面的评论中所述，问题的答案出现在一个旧帖子中：Background-size with SVG squished in IE9-10。

基本上，设计师遵循说明，现在在IE9中正确显示SVG作为背景图像。