为什么 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

该规范明确未定义：

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

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

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

Answer 2

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