宽度为 100% 的 SVG 溢出其容器

Question

在下面的代码片段中，添加 svg 元素会导致出现垂直滚动条。删除 svg 就会删除滚动条。我想了解为什么会发生这种情况，以及是否有一个不可怕的解决方案（例如宽度：99％；高度：98％解决它，但这是一个令人厌恶的解决方案）。

我无法真正删除上面的 DIV 样式，因为其他 html 结构也位于这些容器中，需要它们在那里。

.menuquery {
  border: 1px solid #ccc;
  overflow: auto;
  box-sizing: border-box;
}

.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

svg 上的绿色边框和框大小只是为了让我们可以看到 svg 的边缘，最终不需要它

如果我将 svg 更改为 div，并使 svg css 应用于该 div，则不会出现滚动条，因此 svg 元素似乎有所不同。

我已经在 Firefox 和 IE 中对此进行了测试。两者都显示滚动条，但 IE 显示的可滚动内容稍微多一些

Answer 1

Svg是inline元素，设置font-size: 0;为.menuquery将解决这个问题

.menuquery {
    border: 1px solid #ccc;
    overflow: auto;
    box-sizing: border-box;
    font-size: 0;
}
.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

或者您可以设置display:block为svg. 更新了您的评论。

.menuquery {
    border: 1px solid #ccc;
    overflow: auto;
    box-sizing: border-box;
}
.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
  display:block;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>