为什么Safari对这些表格单元格的处理方式与chrome和firefox不同？

Here is some very simple HTML. On Chrome (v57) and Firefox (v55) the two cells to the right are the same height, and on Safari (v11) they are not. On Safari the top cell is only as big as needed for the content, and the bottom cell gets the rest of the space.

这是一些非常简单的HTML。在Chrome（v57）和Firefox（v55）上，右侧的两个单元格高度相同，而在Safari（v11）上则不是。在Safari上，顶部单元格只有内容所需的大小，底部单元格获得剩余的空间。

My question is - is one of these behaviours correct and one a bug? Is there something simple I can do to get Safari to produce the same results as Chrome (like is there a browser styling difference at play here)? I've inspected it and there are no user agent stylesheet differences that I can see.

我的问题是 - 这些行为中的一个是正确的，还有一个是错误的吗？是否有一些简单的方法可以让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>

I know there are a limitless number of ways that I can produce a image with two equal sized boxes next to it - that isn't the question. The question is, why the difference, and, can simple styling be added to homogenize them? (This is a learning question, as I say, there are a million ways to display two boxes beside a box. That's not what I'm asking.)

我知道有无数种方法可以生成一个旁边有两个相同大小的盒子的图像 - 这不是问题。问题是，为什么差异化，并且可以添加简单的样式以使它们均匀化？（这是一个学习问题，正如我所说，有一百万种方法可以在一个盒子旁边显示两个盒子。这不是我要问的。）

2 个解决方案

#1

The spec leaves this explicitly undefined:

规范明确未定义：

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 2.2没有指定跨越多行的单元格如何影响行高计算，除了所涉及的行高的总和必须足够大以包含跨越行的单元格。

This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.

这尤其意味着CSS没有定义跨越多行的单元格的高度如何跨越它跨越的行分布。

There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.

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

#2

Table cells are rendered arbitrarily depending on their content, so you can never be sure how they are going to be rendered. Specifying dimensions is the way to get specific results.

表格单元格根据其内容任意呈现，因此您永远无法确定它们将如何呈现。指定尺寸是获得特定结果的方法。

#1