Question

我需要在画布红色框中并排绘制一个脚本，右边是html-table-tds ......

HTML：

<table border="1">
<tr>
    <td valign="top">
        <table class="t2" border="1">
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        </table>
    </td>
    <td valign="top"><canvas id="x"></canvas></td>
</tr>
</table>

CSS：

body {
    margin: 30px;
}

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

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

canvas {
    border: 1px dashed green;
}

JS：

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();
});

http://jsfiddle.net/KaDnQ/1/

它在Chrome中的样子（正确）： correct rendering in Chrome: side by side

问题是 Firefox 中的较低框与其“父母”tds相关。 lower boxes are offseted

Firefox中呈现错误的原因是什么？如何解决？

更新：错误的渲染显示在 FF 19（mac）和 IE 9（获胜）！

Answer 1

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

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

此处描述了类似的问题： Incorrect height calculation when CSS property line-height is set

这是一个经过一点修改的工作解决方案（Chrome＆amp; FF测试）： http://jsfiddle.net/BgYpw/3/

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

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

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

内部所有元素的计数乘以firstHeight的第一个。如果内部元素的高度可能不同，那么解决方案就不会出现。在这种情况下，你可以通过 $。每个循环和总结高度来获得高度......

希望我的回复能为某人节省时间：）

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

1 个答案: