我遇到一个问题,即表格单元格中高度为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>
我希望在控制台中看到50
,但会记录55
。
此页面是a fiddle I had made on jsbin.com的确切内容,即记录预期50
的小提琴。
有人能解释一下究竟是什么区别,更重要的是,如何确保我的细胞不会像它一样增长,所以它的高度就像它的内容一样是50像素,就像jsbin一样?
答案 0 :(得分:5)
添加画布样式
<canvas style="display:block"></canvas>
这只是因为画布的默认大小大于预期。