img和跨度相同的svg在IE9中呈現不同尺寸

我們的網絡應用程序使用svg爲它的很多圖像。有時候我們會把它們作爲背景圖片放入，其他時候我們會將它們放在img標籤中。問題是，如果我們在同一頁上以不同的大小使用相同的svg，則IE9無法調整第二組圖像的大小。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>

circle.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中，底部圖像全部呈現爲32像素，並裁剪以適合容器。如果您刪除跨度或圖像，一切都很好，並且很漂亮。

此外，如果您將其中任何一個的圖像url更改爲'circle.svg？'繞過瀏覽器緩存，它也可以正常工作。

有沒有人知道任何解決這個問題？如何同時顯示具有相同SVG內容的span和img標記？將所有img標籤更改爲跨度（反之亦然）的前景令人望而生畏，因爲向每個標籤添加假查詢參數以避開緩存。

來源

2011-09-08 XwipeoutX

從SVG元素中刪除width="32px" height="32px"將修復此問題

來源

2012-08-06 21:22:35 harriyott

img和跨度相同的svg在IE9中呈現不同尺寸

回答

相關問題