html - 添加与正文大小相同的元素时出现滚动条

Question

当我添加一个与 body 标签具有相同大小（宽度 + 高度）的元素时，我总是得到（不必要的？！）水平和垂直滚动条（在 Chrome 和 FF 中测试）。

/* css */
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}

/* javascript */
$("<canvas>")
.appendTo("body")
.attr("width", $("body").width())
.attr("height", $("body").height());

JSFIDDLE 的完整示例。

为什么会出现这些滚动条？主体应该足够大以适应没有滚动条的元素。当从宽度和高度中删除 4 个像素时，滚动条消失了。为什么正好是 4 个像素？

Answer 1

它是否与默认填充为 2px 的 canvas 元素有关？如果您将 css 设置为从画布元素中删除默认边距和填充，会发生什么？

Answer 2

同样的事情发生在我身上，我得到了水平和垂直滚动，我是新手，我不知道为什么会发生这种情况，但是当我设置overflow-x: 0;body 元素时它修复了。我的意思是水平和垂直滚动都消失了。当页面在 y 轴溢出时，页面会得到垂直滚动。