关于Canvas的疑惑

先看测试代码





  
  
  
  Document
  



  

代码很简单,就是div下包含了一个canvas,没有其他多余设置。canvas在没有设置属性或者样式表中没有设置widthheight的情况下,默认应该是300*150的尺寸。按我的理解,外层的div的高度应该是150px,但实际情况却不是这样。

在Chrome中,div的高度是154px

Chrome

在Firefox中,div的高度是155.6px

Firefox

而且在两个浏览器中,canvasdisplay属性都是inline,如果修改成block的话,外部的div的高度就是150px了。考虑到canvas默认是inline元素,我尝试修改line-height属性,不过没有任何作用。

所以我的主要疑惑是:

  1. canvas外部元素的高度是如何计算出来的(displayinline的情况下)
  2. canvas作为一个inline元素,为什么行为和其他inline元素不同,比如可以设置height,line-height也好像没什么作用。

你可能感兴趣的:(关于Canvas的疑惑)