我们的网络应用程序使用 svg 来处理大量图像。有时我们将它们放在 span 中作为背景图片，有时我们将它们放在 img 标签中。问题是，如果我们在同一页面上以不同的大小以两种方式使用相同的 svg，IE9 将无法调整第二组图像的大小。
一个例子胜过 1000 个单词:
测试.html
<!doctype html>
<html>
<head><title>Foo</title></head>
<style>
.half { width: 16px; height: 16px; }
.full { width: 32px; height: 32px; }
.double{ width: 64px; height: 64px; }
span.img {
display: inline-block;
background-image: url('circle.svg');
background-size: 100% 100%;
}
</style>
<body>
<b>Span</b><br />
16: <span class="img half"></span>
32: <span class="img full"></span>
64: <span class="img double"></span>
<hr />
<b>Img</b><br />
16:<img src="circle.svg" class="half" />
32:<img src="circle.svg" class="full" />
64:<img src="circle.svg" class="double" />
<hr />
</body>
</html>
圆.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<circle r="16" cx="16" cy="16" />
</g>
</svg>
在 Chrome 和 Firefox 中，它看起来很棒。在 IE9 中，底部图像全部以 32px 呈现，并被裁剪以适合容器。如果您删除 span 或图像，一切都很好。
此外，如果您将其中任何一个的图像 url 更改为“circle.svg？”为了绕过浏览器缓存，它也可以正常工作。
有人知道解决这个问题的方法吗？如何同时显示具有相同 SVG 内容的 span 和 img 标签？将所有 img 标签更改为 span(或反之亦然)的前景令人望而生畏，因为向每个标签添加伪造的查询参数以绕过缓存也是如此。
最佳答案
从 SVG 元素中删除 width="32px"height="32px" 将解决这个问题
关于html - 具有相同 svg 的 img 和 span 在 IE9 中以不同的尺寸呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7343288/