79

我有一个带有背景图像的 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 的宽度和高度有关。如果我添加 150 像素的高度，则 SVG 会正确呈现。如果我把它变小（即 100 像素），图形就会开始缩小。

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

4

10 回答 10

171

确保您的 SVG 有一个width和height指定。如果您从 Illustrator 生成它，请确保未选中“响应式”框，因为此选项会删除宽度和高度。

于 2014-04-09T18:23:21.807 回答
19

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

于 2016-03-03T15:44:52.080 回答
5

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

  • 如果可能，将背景位置设置为“中心”
  • 对于 background-size 设置两个值，“100% auto”不起作用，所以使用“100% 100%”
  • 如果这仍然无助于将最后一个值更改为 SVG 本身的“viewBox”属性，并使其比 SVG 的宽度和高度宽和高一个像素。这会稍微缩小 SVG，但会阻止 IE 将其截断 - 并且根本不会注意到较小的尺寸。
于 2015-09-02T07:06:38.803 回答
4

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

我建议使用如下编译器站点：https ://jakearchibald.github.io/svgomg/ 并将选项设置为“在高度和宽度上更喜欢 viewBox”

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

并使用 --> data uri: ... 示例将 svg 导入样式表中：

背景图像：data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');

于 2017-03-08T11:44:13.927 回答
3

好吧，看起来没有解决方案。惊喜惊喜。毕竟是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，但我没有测试）。

于 2014-02-18T16:51:22.313 回答
0

对于不是包含元素的完整站点的 SVG 背景图像（例如搜索输入左侧的放大镜），我们遇到了类似的问题。

我们已经在 Illustrator CC 中创建了 SVG，但是通过 Peter Collingridge 的 SVG 优化器运行它们以消除所有不必要的杂物就可以了。 http://petercollingridge.appspot.com/svg-optimiser

于 2014-08-18T14:21:27.993 回答
0

我尝试了@mbxtr 的解决方案

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

这对我在 Windows Chrome 和 IE 上仍然不起作用。我正在导出字体图标，因此如果您有字体，请确保将其导出为：

  • “字体：转换为轮廓”
  • 而“响应式”是错误的

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

于 2016-03-11T11:22:42.970 回答
0

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%"});
  }
  1. svg (original height=1050) 直接添加到自己svg文件 preserveAspectRatio="none" height="2100"
于 2016-06-15T06:07:48.247 回答
0

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;
于 2019-03-18T11:00:38.343 回答
0

我将所有 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;
    }
}
于 2019-11-01T11:04:13.383 回答