先看测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas {
background: green;
}
div {
background: grey;
}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<!-- <script src="./index.ts"></script> -->
</body>
</html>
代码很简单，就是div下包含了一个canvas，没有其他多余设置。canvas在没有设置属性或者样式表中没有设置width和height的情况下，默认应该是300*150的尺寸。按我的理解，外层的div的高度应该是150px，但实际情况却不是这样。
在Chrome中，div的高度是154px
Chrome
在Firefox中,div的高度是155.6px
Firefox
而且在两个浏览器中，canvas的display属性都是inline，如果修改成block的话，外部的div的高度就是150px了。考虑到canvas默认是inline元素，我尝试修改line-height属性，不过没有任何作用。
所以我的主要疑惑是：
-
canvas外部元素的高度是如何计算出来的(display是inline的情况下) -
canvas作为一个inline元素，为什么行为和其他inline元素不同，比如可以设置height,line-height也好像没什么作用。
