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());

Full example at JSFIDDLE.

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

Answer 1

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