【发布时间】：2013-04-16 18:05:22
【问题描述】：
我有一个问题，表格单元格中高度为 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 中的情况一样？
【问题讨论】：
-
“边距”只是从表格继承的边框间距，递归应用。现在，为什么这在 jsbin 中有所不同，而您的示例超出了我的范围。虽然“5px”也是一个神秘的数值……
-
你是个可怕的人。
-
我接受给出的第一个答案，因为它解决了问题，但任何解释（即解释 5px 的真实解释）都会受到尽可能多的支持。
标签： html css html-table