容器 div 高度无法缩放以匹配 IE 中子 SVG 的高度
am_*_*am_ 5 css internet-explorer svg
我有一个容器 div，里面有一个 SVG：
<!DOCTYPE html>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200">
<rect x="0" y="0" width="50" height="200" />
</svg>
</div>
</body>
以及以下 CSS：
svg
{
width: 100%;
height: 100%;
}
div.container
{
width: 100%;
background-color: red;
}
在 firefox、chrome 等中，容器 div 将与 svg 的高度匹配。然而 IE 的情况并非如此（我在 IE9 中测试过）。从 svg 样式块中删除 width/height: 100% 将解决此问题，但是我需要这些样式来缩放我的 SVG（在本示例 jsfiddle 中，我在 SVG 元素中省略了preserveAspectRatio）。
这是jsfiddle： http: //jsfiddle.net/Cx5jR/
我想我可以使用 Zoom:1 来强制 IE 识别 div 元素上的 hasLayout ，但这不起作用。
有任何想法吗？
下面是 IE9 中渲染效果的屏幕截图 - 请注意，div（红色背景）不会缩放到 SVG（黑色矩形）高度以下。
SVG 目前缺少viewBox一致的跨浏览器渲染所需的属性。缺少viewBox, 加上CSS 中 SVG 的width和设置height为 100% 似乎是问题的根源。
这是一个在 Chrome 和 IE9 上具有一致渲染的 jsfiddle： http: //jsfiddle.net/Cx5jR/3/。
将以下内容添加到标签中<svg>：
viewBox="0 0 50 200"
起始X坐标，起始Y，结束X，结束Y）
CSS 中的height和被删除。width<svg>
| 归档时间： |
|
| 查看次数： |
9843 次 |
| 最近记录： |