表格单元格中画布下方的空格

Den*_*ret 1 html css html-table

我有一个问题,其中100%表格单元格中具有高度的图像或画布使该单元格增长.

这是整个页面:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table><tr><td id=t style="width:50px;height:50px;background:green;">
      <canvas id=c style="width:100%;height:100%;margin:0;padding:0"></canvas>
  </td></tr></table>
  <script>
    console.log($('#t').height());
  </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我希望50在控制台中看到但它会记录55.

这可以在这里测试.

这个页面是我在jsbin.com上制作的小提琴的确切内容,小提琴记录了预期的内容50.

有人可以解释一下究竟是什么区别,更重要的是,如何确保我的细胞不会像它一样增长,所以它的高度就像它的内容一样是50像素,就像在jsbin一样?

小智 5

添加画布样式

<canvas style="display:block"></canvas>
Run Code Online (Sandbox Code Playgroud)

这只是因为画布的默认大小大于预期.