Internet explorer IE9中的SVG宽度

我有一本书。 在Firefox和Chrome中，

宽度：100%

和

高度：100%

运行良好。但在InternetExplorer9中不是

有人知道怎么修吗

谢谢

更新：

---

我真正的问题是把这个SVG放到一个文件中（在IE9中宽度很糟糕）。

是动态的，我不能为SVG的容器设置

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

要解决此问题，可以将html、body和div元素设置为100%高度：

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

看


更新：

好的，据我所知，IE9无法计算SVG元素上的
宽度
和
高度
，因此它返回到（300×150px）。您在父级（
.ic3 svg箭头
）上设置的是
高度
，而不是
宽度
），因此svg仍然默认为300px宽

我在这里使用了：基本上给父元素一个纵横比（在本例中为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%;
}

看看我在IE9、IE11、Firefox和Chrome上看到的是什么样子

我从中获得灵感。
这是因为html、body和div元素正在向下折叠到SVG的固有高度

要解决此问题，可以将html、body和div元素设置为100%高度：

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

看


更新：

好的，据我所知，IE9无法计算SVG元素上的
宽度
和
高度
，因此它返回到（300×150px）。您在父级（
.ic3 svg箭头
）上设置的是
高度
，而不是
宽度
），因此svg仍然默认为300px宽

我在这里使用了：基本上给父元素一个纵横比（在本例中为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%;
}

看看我在IE9、IE11、Firefox和Chrome上看到的是什么样子

我从中获得了灵感。
它奏效了，我更新了问题。我真正的问题是更新版本，只是我想简化问题。行为是一样的，但是我不能在容器上设置
宽度
在你的CSS中？e、 g.奇怪。我把高度放回到
.ic3 svg arrow
上，它在Chrome、Firefox和IE11中运行得非常好。有什么原因不能在
.ic3 svg箭头上指定像素宽度吗？在我看来，IE9、10和11，当前的Chrome和Firefox（实际的，不是模拟的）都是一样的。为什么不能设置容器的宽度？我需要没有表宽度的容器：。
已修复
布局没有帮助。我无法设置容器的宽度，因为宽度是从SVG中给定的，并且单元格不同。它可以工作，我更新了问题。我真正的问题是更新版本，只是我想简化问题。行为是一样的，但是我不能在容器上设置
宽度
在你的CSS中？e、 g.奇怪。我把高度放回到
.ic3 svg arrow
上，它在Chrome、Firefox和IE11中运行得非常好。有什么原因不能在
.ic3 svg箭头上指定像素宽度吗？在我看来，IE9、10和11，当前的Chrome和Firefox（实际的，不是模拟的）都是一样的。为什么不能设置容器的宽度？我需要没有表宽度的容器：。
已修复
布局没有帮助。我无法设置容器的宽度，因为宽度是由SVG提供的，并且单元格不同。