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

Question

我使用 SVG 文件作为我的 HTML 元素的背景。它在所有主要浏览器中都能正常工作。问题是我的网站也需要在 Internet Explorer 9 中正常工作和正确显示。在 IE9 中，SVG 背景总是“移动”到右边并剪切，如下所示:

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

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