html - 为什么 Safari 对待这些表格单元格的方式与 Chrome 和 Firefox 如此不同？

Question

这是一些非常简单的 HTML。在 Chrome (v57) 和 Firefox (v55) 上，右侧的两个单元格高度相同，而在 Safari (v11) 上则不然。在 Safari 上，顶部单元格的大小仅满足内容所需的大小，底部单元格占据其余空间。

我的问题是 - 这些行为之一是正确的，一个是错误吗？我可以做一些简单的事情来让 Safari 产生与 Chrome 相同的结果(比如这里是否存在浏览器样式差异)？我已经检查过它，并且没有看到用户代理样式表差异。

img {
  max-width: 100%;
  display: block;
}

.image-cell {
  width: 150px;
}

<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
  <tr>
    <td rowspan="2" class="image-cell">
      <img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
    </td>
    <td>Top Cell</td>
  </tr>
  <tr>
    <td>Bottom Cell</td>
  </tr>
</table>

我知道有无数种方法可以生成旁边有两个大小相等的框的图像 - 这不是问题。问题是，为什么会有差异，以及，是否可以添加简单的样式来使它们同质化？ (这是一个学习问题，正如我所说，有一百万种方法可以在一个框旁边显示两个框。这不是我要问的。)

Answer 1

spec将此显式保留为未定义:

CSS 2.2 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 没有定义跨越多行的单元格的高度如何在其跨越的行之间分布。

除了为表格和/或表格行提供绝对高度之外，没有什么好方法可以使表格的外观均质化。给定一个事先不知道高度的任意图像，这对于 CSS 表格布局来说几乎是不可能的。