3

在下面的代码片段中，添加 svg 元素会导致出现垂直滚动条。删除 svg 会删除滚动条。我想了解它为什么会发生以及是否有一个不可怕的解决方案（例如 width:99%; height: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 显示的可滚动内容稍微多一些

4

2 回答 2

4

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>

于 2017-07-27T10:48:16.680 回答
1

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>

于 2017-07-27T10:42:02.327 回答