为什么在FireFox中,可见溢出表示100%时svgs高度计算不正确?

时间:2019-06-25 13:48:58

标签: html css svg

我在绝对定位的div中有一个SVG。 div是一个网格,并设置了宽度和高度。

SVG的宽度和高度为100%,并且溢出设置为可见。

如果(例如)父div为150 x 75,我希望svg为150 x 75,而在Chrome中确实如此

但是在Firefox中不是这样(不确定野生动物园吗?!),这似乎使svgs的高度成为默认值(我相信如果没有给出尺寸,svgs自然是300x150)

<html>
<head>
<style>
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

svg {
    background-color: green;
    height: 100%;
    width: 100%;
    overflow: visible;
}

#parent{
  position: absolute;
  left: 30px;
  top: 50px;
  width: 150px;
  height: 75px;
display: grid;
}
</style>
</head>
<body>

<div id="parent">
<svg></svg>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

此问题是由于您在网格内部使用百分比值,并且该百分比将相对于网格轨迹而不是网格容器。由于我们没有明确定义音轨的大小,因此这将产生 random 行为

一个简单的解决方法是在高度相同的情况下定义一个grid-template-rows

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  background-color: green;
  height: 100%;
  width: 100%;
  overflow: visible;
}

#parent {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 150px;
  height: 75px;
  grid-template-rows: 75px; /* added this*/
  display: grid;
}
<div id="parent">
  <svg></svg>
</div>

相似的问题:Why is my Grid element's height not being calculated correctly?