具有行跨度的表格，<td> 高度在 Safari (7.1.2) 中不正确，在 FF/IE/Chrome 中正常

Question

我有一个使用行跨度的基本 HTML 表格。

CSS

html, body{
    height: 100%;
    width: 100%;
}
table, tr, td{
    border:1px solid #f00;
    border-collapse: collapse;
}

HTML

<table>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>

JS 小提琴 http://jsfiddle.net/38ro2p39/1/

在 Firefox (36)、Chrome (40) 和 IE10 中，看起来我希望“顶部图像”和“底部图像”单元格大小相同。

在 Safari（5.1.7 for Windows）中，“顶部图像”单元格是其内容的高度，“底部图像”填充其余空间。

我不想为行/列指定任何大小，因为内容会改变大小并需要拉伸。

任何想法为什么会发生这种情况，或者我可以如何解决它？ 谢谢！

PS。我正在寻找桌子的替代品。我确实看过将<div> 与表格布局一起使用，但它缺少行跨度。

编辑

感谢 Pete 指出 Safari for Windows 是古老的。一位使用 Mac OSX 的 Safari 7.1.2 的朋友确认该版本仍然存在该问题。

Answer 1

根据spec：

CSS 2.1 没有指定跨越多行的单元格如何影响行高计算，只是所涉及的行高总和必须足够大以包含跨越行的单元格。

我找不到解决此问题的 CSS 方法，但我想出了一个适用于您的代码的 JavaScript 方法：

var td= document.querySelectorAll('tr td[rowspan="2"]');

for(var i = 0 ; i < td.length ; i++) {
  if(Math.abs(td[i].offsetHeight/2 - td[i].parentNode.children[0].offsetHeight) > 1) {
    td[i].parentNode.children[0].style.height = td[i].offsetHeight/2 + 'px';
  }
}

基本上，它使所有tds 都具有一个行跨度，并将其行中的其他td 设置为它们的一半高度。

Working Fiddle