Question

我有SVG。在Firefox和Chrome中，width:100%和height:100%运行良好。但是在Internet Explorer 9中没有。

有人知道如何解决它？

感谢。

更新

我真正的问题是将此SVG放入table（IE9中的宽度很糟糕）。 <td>是动态的，我无法为SVG的容器设置width。

Answer 1

这是因为html，body和div元素正在向下折叠到SVG的固有高度。

要解决此问题，您可以将html，body和div元素设置为100％height：

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

请参阅http://jsfiddle.net/7Z8kg/2/

<强>更新

好吧，据我所知，IE9无法计算SVG元素上的width和height，因此它会回落到default for replaced elements（300×150px）。您在父级height上设置了width但不是.ic3-svg-arrow，因此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获取灵感。

IE9中的SVG宽度

1 个答案: