Safari表格单元格边界垂直对齐

Question

最近我发现Safari上有一个问题。 我有红线问题（td底部边框或鞋面）。 这是小提琴http://jsfiddle.net/ryrmS/55。 完整的来源：

<table border="0">
<tbody>
    <tr>
        <td style="border-bottom: 2px solid red;">
            <div style="width: 20px;"></div>
        </td>
        <td style="border: 1px solid blue; height: 156px;" rowspan="2">
            Content1<br/>
            Content2<br/>
            Content3<br/>
        </td>
    </tr>
    <tr>
        <td style="border-top: 2px solid green;">
            <div style="width: 20px;"></div>
        </td>
    </tr>
</tbody>
</table>

问题是，单元格不能捕获Safari中50％的空间，但首先占用0，第三个td占用所有可用高度。它适用于除Safari之外的所有浏览器。

此外，我无法指定div或td标签的固定高度，因为它在我的代码中生成了很多次，并且有不同的高度，而且还有许多表在另一个内。

我无法弄清楚Safari的问题是什么以及如何修复它。有没有人有一些提示？

看起来像：

Answer 1

如果您在跨越两行的td上明确设置height: 156px;，为什么不将其他2个tds设置为height: 88px;？

<强> See working jsFiddle demo

的 HTML

---

<table border="0">
    <tbody>
        <tr>
            <td style="border-bottom: 2px solid red; height: 88px;">
                <div style="width: 20px;"></div>
            </td>
            <td style="border: 1px solid blue; height: 156px;" rowspan="2">
                Content1<br/>
                Content2<br/>
                Content3<br/>
            </td>
        </tr>
        <tr>
            <td style="border-top: 2px solid green; height: 88px;">
                <div style="width: 20px;"></div>
            </td>
        </tr>
    </tbody>
</table>

的 CSS

---

table { border-collapse: separate; border-spacing: 0; }
td { vertical-align: middle; text-align: center; }

的 结果

（在FF，Chrome，Safari和IE中测试）

---