首页 文章

容器div高度不会缩放以匹配IE中子SVG的高度

提问于
浏览 次
4

我有一个容器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样式块中删除宽度/高度：100％将解决这个问题，但是为了扩展我的SVG我需要这些样式（我在这个例子jsfiddle中省略了SVG元素中的preserveAspectRatio） .

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

我以为我可以使用zoom：1强制IE识别div元素上的hasLayout，但这不起作用 .

有任何想法吗？

以下是IE9中渲染效果的截图 - 请注意div（红色背景）不会缩放到SVG（黑色矩形）高度下方 .

IE9 bug svg scale bg

css internet-explorer svg

1 回答

  • 2

    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）

    <svg> 的CSS中的 height 和 width 被删除 .

    回复于

相关问题