Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

svg上的绿色边框和盒子尺寸仅在那里，所以我们可以看到svg的边缘，最终不需要它

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

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者您可以将display:block设置为svg。更新于your comment。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

从overflow: auto;移除.menuquery：

.menuquery {
  border: 1px solid #ccc;
  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>

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

2 个答案: