html - 包含画布的 div 有一个奇怪的下边距 5px

Question

我面临一个奇怪的问题。

简而言之：

当我们将画布放入 div 并设置画布的大小时，div 会自动比画布大 5px，而我希望它得到完全相同的大小。

这个问题是这个答案的后续，所以我将采用相同的示例，该问题已在 Firefox 和 google chrome 中重现。（其他浏览器没试过）

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS：

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
}
canvas {
    background-color: khaki; /* demo purposes */
}

结果（参见 div 中的空白）：

您还可以在这个 JSfiddle中看到这个完全相同的示例（非常简单）

为什么会发生这种情况，我们该如何预防？

score 33 · Accepted Answer

display: block您可以通过添加到画布元素的 css 来防止它发生。

IE：

canvas {
    background-color: khaki; /* demo purposes */
    display: block;
}

1 回答 1