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

Question

当我们创建一个HTML5画布元素时,即使我们将margin和padding设置为0,画布元素下方也会出现一个鬼差.

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

我们尝试了各种各样的东西,但无法抹去幽灵边缘.

如何在没有鬼差的情况下创建画布元素？

Answer 1

添加vertical-align: bottom到它.

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