Jquery 滚动SVG图像在Safari和IE中调整大小

我使用了一个简单的jquery图像交换来交换一些图标，并使用svg作为图像

$(function(){
    $('img.rollover').hover(function(){
        var e = $(this);
        e.data('originalSrc', e.attr('src'));
        e.attr('src', e.attr('data-rollover'));
    }, function(){
        var e = $(this);
        e.attr('src', e.data('originalSrc'));
    }); /* a preloader could easily go here too */
});

在chrome中一切都很好，但在safari中，当你去掉图标后，浏览器会将它们调整得非常小。在IE中，它们从一开始就很小

我希望有人告诉我为什么会发生这种情况，以及这是否是使用SVG图像的最佳方式

<a class="icon-link" href="#" data-title="Lucid"><div id="icon-sidebar"><img class="rollover" src="images/lucid_icon.svg" data-rollover="images/lucid_icon_white.svg" /></div></a>

#icon-sidebar {width:50%; height:auto; margin-left:auto; margin-right:auto; margin-bottom:20px;}
    img.rollover {width:100%;}

#图标侧边栏{宽度：50%；高度：自动；左侧边距：自动；右侧边距：自动；底部边距：20px；}
img.rollover{宽度：100%；}

这是我正在工作的测试站点的链接。

---

谢谢，谢谢

您需要从

#图标侧栏

div中删除

height

#icon-sidebar {
    background-size: cover;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

---

您应该为左侧的#icons侧边栏设置100%的宽度，否则#icon侧边栏将从左侧的#icons侧边栏继承50%的宽度。此外，您的id图标边栏不是唯一的，您应该在您的情况下将其更改为class。

尝试将

字体大小：

设置为svg图像