img 和 span 在 IE9 中以不同大小呈现相同的 svg答案

【问题标题】：img and span with same svg render at different sizes in IE9img 和 span 在 IE9 中以不同大小呈现相同的 svg
【发布时间】：2011-11-12 16:26:17
【问题描述】：

我们的网络应用程序使用 svg 来处理很多图像。有时我们将它们放在 spans 中作为背景图像，有时我们将它们放在 img 标签中。问题是，如果我们在不同尺寸的同一页面上以两种方式使用相同的 svg，IE9 无法调整第二组图像的大小。

一个例子值1000字：

test.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 渲染，并被裁剪以适合容器。如果您删除跨度或图像，一切都很好。

另外，如果您将其中任何一个的图片网址更改为“circle.svg？”绕过浏览器缓存，它也可以正常工作。

有没有人知道解决这个问题的方法？如何同时显示具有相同 SVG 内容的 span 和 img 标签？将所有 img 标签更改为 span（反之亦然）的前景令人生畏，就像为每个标签添加虚假查询参数以绕过缓存一样。

【问题讨论】：

标签： html css svg internet-explorer-9

【解决方案1】：

从 SVG 元素中删除 width="32px" height="32px" 将解决此问题

【讨论】：