Question

我有一个带背景图片的div设置：

<div>Play Video</div>

使用以下CSS：

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

Firefox，Safari和Chrome都支持背景大小。在IE8中，SVG由PNG文件替换。但是，在IE9和IE10中，SVG文件的大小很小。这个问题似乎与div的宽度和高度有关。如果我添加150px的高度，SVG将正确呈现。如果我把它缩小（即100px），图形就会开始缩小。

有没有人找到在资源管理器中解决此问题的方法？有没有办法告诉IE使用背景大小值独立于div的宽度和高度？

Answer 1

确保您的SVG指定了width和height。如果您从Illustrator生成它，请确保＆＃34;响应＆＃34;未选中此框，此选项会删除宽度和高度。

Answer 2

为SVG添加宽度和高度，因为mbxtr说对我来说几乎有用。我还需要添加preserveAspectRatio="none slice"以使其在IE中响应。

Answer 3

对我来说，这3个修复有帮助：

如果可能，将背景位置设置为“中心”
对于背景大小设置两个值，“100％auto”将不起作用，因此请使用“100％100％”
如果仍然无法改变SVG本身的最后一个值“viewBox”属性，并使其比SVG的宽度和高度宽一个像素。这会稍微缩小SVG，但会阻止IE将其切断 - 而且根本不会注意到较小的尺寸。

Answer 4

嗯，看起来没有解决方案。惊喜惊喜。毕竟这是IE。我最终使用了以下代码：

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

我更喜欢更干净的版本，但这个hack适用于所有现代浏览器，包括IE8,9和10（可能是11但我没有测试）。

Answer 5

我遇到了这个问题，我发现删除svg代码中的高度和宽度但保留viewBox可以解决问题。

我建议使用以下编译器网站：https://jakearchibald.github.io/svgomg/ 并将选项设置为＆＃34;更喜欢viewBox的高度和宽度＆＃34;

如果这些都不起作用，在Illustrator中尝试在svg图像周围应用方形背景，但在边缘留下足够的填充。

使用 - ＆gt;导入样式表中的svg＆＃;数据uri：... 例如：

background-image：data-uri（＆＃39; image / svg + xml; charset = UTF-8＆＃39;，＆＃39;其中/ your / svg / is / located＆＃39;）

Answer 6

SVG背景图像存在类似的问题，这些图像不是包含元素的完整网站（例如搜索输入左侧的放大镜）。

我们在Illustrator CC中创建了SVG，但是通过Peter Collingridge的SVG优化器运行它们来完成所有不必要的操作。 http://petercollingridge.appspot.com/svg-optimiser

Answer 7

我试过@ mbxtr的解决方案

确保您的SVG指定了宽度和高度。如果您要从Illustrator生成它，请确保取消选中“响应”框，因为此选项会删除宽度和高度。

在Windows Chrome和IE浏览器上，这仍然无效。我正在导出字体图标，因此如果您有字体，请确保将其导出为：

“font：转换为大纲”
和“响应”是假的

我也取消选中“缩小”以防万一...

Answer 8

1。的JavaScript

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }

svg（原始身高= 1050）直接添加到自己的svg文件 preserveAspectRatio =“none”height =“2100”

Answer 9

使用这些属性，SVG背景图片大小将在IE和Chrome上呈现相同的颜色

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;

Answer 10

我将所有SVG更改为在Illustrator中无响应，无济于事。

由于我正在寻找代码示例，因此我错过了正确答案，当说“确保SVG具有指定的宽度和高度”时，它们意味着这种情况：

    .my-class {
        background-size: 200px 100px;
    }

例如，如果IE与Chrome的大小有点不同，我就使用媒体查询来定位IE：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .my-class {
        background-size: 200px 110px;
    }
}

SVG的背景大小在IE9-10中被压缩

10 个答案:

1。的JavaScript