div容器高度不能扩展到满足孩子SVG的高度在IE

我有了它内部的一个SVG的容器DIV：div容器高度不能扩展到满足孩子SVG的高度在IE

<!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; 
}

在火狐，铬等容器div将匹配svg的高度。但IE浏览器并非如此（我在IE9中测试过）。从svg样式块中删除宽度/高度：100％可以解决这个问题，但是我需要这些样式来扩展我的SVG（我在此示例中的jsfiddle的SVG元素中省略了preserveAspectRatio）。

这里是的jsfiddle： http://jsfiddle.net/Cx5jR/

我在想，我可以使用变焦：1，以强制IE认识到div元素上hasLayout的，但这并没有工作。

任何想法？

下面是从IE9中渲染效果的截图 - 注意div（红色背景）不能在SVG（黑色矩形）高度下缩放。

IE9 bug svg scale bg

来源

2013-02-28 am_

你能提供一个问题的截图吗？我不确定我在IE9中看到的是与您相同的问题 - 虽然渲染效果与Chrome中不一样。另外，如果您事先知道.SVG的高度，为什么不设置'height：200px'？ – ASGM 2013-03-03 12:16:10

感谢您的评论，我在这个例子中设置的SVG只是一个虚拟 - 在我的真实例子中，我不知道SVG在加载页面之后会达到什么样的高度和宽度。我使用offsetWidth来获取宽度（响应布局），然后从中计算高度。 – 2013-03-03 12:19:28

在这种情况下，行为的屏幕截图仍然会有所帮助（我想确保我正在复制该问题）。 – ASGM 2013-03-03 12:21:26

的SVG目前缺乏一个viewBox属性，这是需要一致的跨浏览器的渲染。缺少viewBox，并且将CSS中的width和height设置为CSS中的100％似乎是问题的根源。

这是一个跨浏览器和IE9一致呈现的jsfiddle：http://jsfiddle.net/Cx5jR/3/。

以下内容添加到<svg>标签： viewBox="0 0 50 200" （起始X坐标，起始Y，结束X，结束Y）

而且height和width在CSS的<svg>被删除。

来源

2013-03-03 12:32:13 ASGM

@am_请让我们知道这是否真的解决了您的问题。 – abbood 2013-03-03 13:39:59

感谢您的建议！我将在今晚晚些时候尝试 - 并让你知道。 – 2013-03-03 14:24:00

添加viewBox后，我发现我并不需要将SVG的高度设置为100％，以便SVG根据我的响应式布局进行缩放。如果我使用100％高度，即使我有viewBox，也会发生同样的问题。然而，添加viewBox和preserveAspectRatio似乎已经解决了我在IE9中的问题。谢谢！ – 2013-03-03 16:06:53

div容器高度不能扩展到满足孩子SVG的高度在IE

回答

相关问题