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

2023年1月30日 250次阅读

我有一个容器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(黑色矩形)高度下方.

最佳答案 SVG目前缺少viewBox属性,这是一致的跨浏览器呈现所需的.缺少viewBox,结合在CSS中将SVG的宽度和高度设置为100％似乎是问题的根源.

这是一个jsfiddle,在Chrome和IE9：http://jsfiddle.net/Cx5jR/3/上具有一致的呈现.

以下内容添加到< svg>标签：
viewBox =“0 0 50 200”
(开始X坐标,开始Y,结束X,结束Y)

和< svg>的CSS中的高度和宽度被删除.

点赞