内部有帆布的高度相同的表格单元格：填充错误？

Question

我们有一套固定的CSS规则，但是当我们修改HTML标记以包含画布时，相邻单元格上会出现一个奇怪的填充。这是CSS：

.wrap{
    width:100%;
    display: table;
}
.row {
    display: table-row;
}
.left{
    width: 100px;
    display: table-cell; 
    background-color: #0f0;
}
.right{
    background-color: #f00;
    display: table-cell;     
}

正常情况：

查看小提琴here。请注意红色单元格中文本的位置：顶部，与单元格的顶部对齐。

<div class="wrap">
    <div class="row">
        <div class="left">
            Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

画布案例

查看小提琴here。我们将左侧单元格中的Lorem文本换成90x90画布。查看红色单元格上的文本现在如何与画布底部对齐，并将填充应用于单元格。

<div class="wrap">
    <div class="row">
        <div class="left">
            <canvas width='90px' height='90x'></canvas>
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

问题：你能解释为什么这个填充出现在左侧单元格上，如果这是预期的行为？另外，你能提出一个摆脱这个错误的解决方案吗？