html - 带有行跨度的表格， 高度在 Safari (7.1.2) 中不正确，在 FF/IE/Chrome 中正常

Question

我有一个使用 rowspan 的基本 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 fiddle http://jsfiddle.net/38ro2p39/1/

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

在 Safari(适用于 Windows 的 5.1.7)中，“顶部图像”单元格是其内容的高度，“底部图像”填充其余空间。

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

知道为什么会发生这种情况，或者我该如何解决？谢谢!

附言。我正在寻找 table 的替代品。我确实看过使用 <div>具有表格布局，但缺少行跨度。

编辑

感谢 Pete 指出 Windows 版 Safari 很古老。一位使用 Safari 7.1.2 for Mac OSX 的 friend 证实该问题仍然存在于该版本中。

Answer 1

根据 spec :

CSS 2.1 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.

我找不到解决此问题的 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';
  }
}

基本上，它获取所有具有 rowspan 的 td，并将行中的其他 td 设置为其高度的一半。

Working Fiddle