我有一个容器 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 样式 block 中删除 width/height: 100% 将解决这个问题，但是我需要这些样式来缩放我的 SVG(我在这个示例 jsfiddle 的 SVG 元素中遗漏了 preserveAspectRatio)。
这是 jsfiddle: http://jsfiddle.net/Cx5jR/
我想我可以使用 zoom:1 来强制 IE 识别 div 元素上的 hasLayout，但这没有用。
有什么想法吗？
这是 IE9 中呈现效果的屏幕截图 - 请注意，div(红色背景)不会缩放到 SVG(黑色矩形)高度以下。
最佳答案
SVG 目前缺少 viewBox属性，这是一致的跨浏览器渲染所必需的。缺少viewBox , 结合设置 width和 height CSS 中的 SVG 到 100% 似乎是问题的根源。
这是一个在 Chrome 和 IE9 上呈现一致的 jsfiddle:http://jsfiddle.net/Cx5jR/3/ .
以下添加到<svg>标签:
viewBox="0 0 50 200"
(起始X坐标，起始Y，结束X，结束Y)
和height和 width在 <svg> 的 CSS 中被删除。
关于css - 容器 div 高度不缩放以匹配 IE 中子 SVG 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15135432/