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

Question

当我们创建一个HTML5 canvas元素，鬼缘出现的canvas元素下方，即使我们设置margin和padding为0

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

我们尝试了各种各样的事情，但可以”删除重影边缘。

我们如何创建一个没有鬼缘canvas元素？

Answer 1

添加vertical-align: bottom它。

这是由帆布是一个内联元素引起的。因此，它被有效地视为一个角色。因此，它必须遵循基线规则，即在字符（例如gjpqy）低于基线的字符的情况下留下一些空格。通过将vertical-align设置为bottom，您实际上将画布对齐到下拉字母的底部。只要画布本身比line-height高，你就没有问题。如果画布比line-height短，你将开始看到画布上面的“鬼利润”，因为它保留余地bdfhklt，高大的字母。这可以通过添加line-height: 1px规则来解决。