jaz*_*lue 0 html javascript css canvas css-tables
我试图将一个canvas元素放入一个没有填充的表格单元格中,即我想在画布和单元格的顶部/底部之间没有边距.因此,我将行高定义为20px,将画布高度定义为20px.我也使用填充:0px样式.但是,我从顶部和左边都没有填充,我仍然在底部填充填充.事实上,看起来表格单元格更高,以适应不希望的边缘.我该如何解决？
另外,在HTML和CSS中定义画布宽度和高度有什么区别？一个会超越另一个吗？
下面是我的HTML代码.谢谢.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
尝试将以下内容添加到画布的样式中:
display : block;
你可以看看为什么你看这个:http://jsfiddle.net/S7YJu/1/ - 默认情况下画布显示inline这意味着它排列的方式为字母底部留下空间,如"y"或" p"挂在......下面