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

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

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

Answer 2

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

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

2 个答案: