css - SVG 不会留在 Firefox 中的 中

Question

这是一个很好的:jsFiddle

body {
    background-color: black;
}
#divResearch {
    position: fixed;
    top: calc(((100% - 70px) * .05) + 40px);
    left: 3%;
    width: 94%;
    height: calc((100% - 70px) * .75);
    background-color: darkgreen;
}

如果您使用 Chrome 31(甚至 IE 11 - 您能相信吗？!)查看上面的 fiddle ，当您移动结果窗口调整大小句柄左右。 SVG 已被告知保持其纵横比；根据您调整窗口大小的方式，您会在宽度或高度上看到多余的绿色。

这在 FF 26 中不起作用。

在 FF 26 中，当您调整宽度时，SVG 高度会不断变大，并且永远不会受到 div 的限制。这是我的 FF 错误还是糟糕的 CSS3？此代码通过了 W3C 验证 (fwiw)。

Answer 1

将 width="100%" 和 height="100%" 添加到 svg-tag 有帮助。

关于 w3c.org 文档，如果未设置，则应为 100%:“如果未指定该属性，效果就像指定了值‘100%’一样。”

看来FF26的svg元素默认值有问题