Question

为什么在这个html5页面上有一个垂直滚动：

<!DOCTYPE html>
<html><head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      width: 100%;
      height: 100%;
    }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head><body>
  <svg></svg>
</body></html>

Answer 1

svg是一个内联元素，就像img或span一样，不确定这是一个错误，或者使用display: block;确定问题

svg {
   display: block;
}

Demo

Answer 2

如果你能提供display:block，它应该会消失。内联元素以这种方式表现是奇怪的，但不确定为什么会发生这种情况......

 svg {
      width: 100%;
      height: 100%;
      display:block
    }

Demo

为什么这个html5页面上有垂直滚动？

2 个答案: