Jquery Firefox中的高度错误（画布图形）

我需要一个脚本画在画布红色框并排的html表tds是在右边

这是如何做到的：

Html:

Js:

这是Chrome correct中的外观：

问题是Firefox中较低的框与它们的父tds相偏移。

Firefox中错误呈现的原因是什么？如何修复

---

更新：FF 19 mac和IE 9 win上出现错误渲染

花了大量时间在研究和调试上，我准备回答我自己的问题：

问题是容器的高度并不总是等于内部所有元素的总和。 发现，这是因为线的高度属性

这里描述了类似的问题：

这是一个经过少量修改的工作解决方案，经过铬和FF测试：

如何修复的想法： 将容器内所有元素的高度/外光相加，并将该值应用于canvas.height

在上面的例子中，它是这样做的：

c.height = $('#le div').length * $('#le div:first').outerHeight(); 

内部所有元素的计数与第一个元素的外光相乘。 若内部元件的高度可能不同，那个么该解决方案就行不通。 在这种情况下，您可以通过执行$来获得高度。每个循环和求和高度尤其是

---

希望我的回复能为其他人节省时间：

在我的Firefox 18.0.2Me中也很不错，在19.0中看起来还不错。奇怪。。。我在MacI上有FF，我还请我在win上的一个朋友检查：这个bug出现在IE 9中！

body {
    margin: 30px;
}

.t2 {
    border-collapse: collapse;
    border-spacing: 0;
}

.t2 td {
     padding: 5px;
     text-align: center;
}

canvas {
    border: 1px dashed green;
}

var canvasWidth = $(".t2").outerWidth()*3;
var canvasHeight = $(".t2").outerHeight();
var c = document.getElementById("x");
var c2 = c.getContext("2d");

c.width = canvasWidth;
c.height = canvasHeight;

$('.t2 td:odd').each(function() {

    var cur = $(this);
    var topOffset = 0;
    var shouldCount = true;
    var h = $(this).outerHeight();

    $('.t2 td').each(function() {    
        if (shouldCount) {
            topOffset += h;

            if (cur.is(this)) {
                topOffset -= h;
                shouldCount = false;
            }
        }
    });

    c2.fillStyle = '#f00';
    c2.beginPath();
    c2.moveTo(0, topOffset);
    c2.lineTo(25, topOffset);
    c2.lineTo(25, topOffset+h);
    c2.lineTo(0, topOffset+h);
    c2.closePath();
    c2.fill();
});

c.height = $('#le div').length * $('#le div:first').outerHeight();