IE9中的SVG寬度

Question

我有一個SVG。 在Firefox和Chrome中，width:100%和height:100%運行良好。但在Internet Explorer 9中不是。

有人知道如何解決它？

謝謝。

UPDATE：

我真的問題是把這個SVG成table（寬度是可怕的IE9）。 <td>是動態的，我無法爲SVG的容器設置width。

Answer 1

這是因爲html，body和div元素摺疊到SVG的固有高度。

要解決，你可以設置HTML，身體，div元素，以100％的高度：

html, body, div { width: 100%; height: 100%; } 

見http://jsfiddle.net/7Z8kg/2/

---

更新：

OK ，據我所知，IE9未能計算SVG元素上的width和height ，所以它回落到default for replaced elements（300×150px）。你設置了一個height而不是父親（.ic3-svg-arrow）上的width，所以SVG仍然默認爲300px寬。

我已經在這裏使用the Intrinsic Ratio trick：在本質上給父元素一個長寬比（在這種情況下是1：1），並使用絕對定位使SVG適合該大小。這依賴於你事先知道寬高比，但似乎也對這個問題的工作：

/* Use padding to create a 1:1 aspect ratio */ 
.ic3-svg-arrow { 
    height: 0; 
    padding-bottom: 100%; 
    position: relative; 
} 
/* Use positioning to make the SVG fit the ratio */ 
.ic3-svg-arrow svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

見http://jsfiddle.net/7Z8kg/15/橫跨IE9，IE11，Firefox和Chrome看起來是一樣的我。

我從this article, which has lots of useful SVG sizing tips獲取靈感。