消除HTML5 canvas元素下面的鬼边缘？

Question

当我们创建一个HTML5画布元素时，即使我们将页边距和填充设置为0，也会在画布元素下方出现一个幻边。

示例：http://jsfiddle.net/yvbmd/

我们尝试过各种各样的东西，但不能抹去幽灵边缘。

我们如何创建没有鬼差的画布元素？

Answer 1

向其添加vertical-align: bottom。

这是由画布作为内联元素引起的。因此，它实际上被认为是一个角色。因此，它必须遵循基线规则，即在gjpqy等字符低于基线的情况下，在线下方留出一点空间。通过将vertical-align设置为bottom，您实际上将画布与下拉字母的底部对齐。只要画布本身比line-height高，你就没有问题。如果画布比line-height短，你将开始在画布上方看到“鬼魂边缘”，因为它为bdfhklt（较高的字母）预留了空间。这可以通过添加line-height: 1px规则来修复。