Question

我只是偶然发现了一个使用table-cell css属性的布局的非常奇怪的行为。我在当前的FF，Safari和Chrome中尝试了以下代码。到处都是一样的行为。

我的问题是否有人知道为什么会这样。它是浏览器错误还是已定义的行为？我发现this问题提示如何解决问题，但我想知道为什么会发生这种情况。我想其他人也想知道。

问题：如果我在第二个表格单元格中的 发表评论，那么一切都很好。但是，如果 div 保持为空，则其他两个单元格的内容类似于“offset-top”。该偏移具有与中间单元的高度相同的尺寸。即外部细胞的内容向底部移动。我添加了两个截图 div_not_empty.png 和 div_empty.png 。

感谢

更新我忘记了截图。他们来了： Div is empty Div is not empty

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Strange behavior with table-cell formatting</title>
    <style type="text/css" media="screen">
      #table {
        display:    table;
        background: #efefef;
      }
      div.cell {
        display:    table-cell;
      }
      #c1 div.content {
        width:    200px;
      }
      #c2 {
        border-left: 2px solid #ccc;
      }
      #c2 div.content {
        height:   150px;
        width:    150px;
        background: #aaa;
        vertical-align: bottom;
      }
      #c3 {
        width:    200px;
        border-left: 2px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="table">
      <form id="c1" class="cell">
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing 
          elit, sed do eiusmod tempor incididunt ut.
        </div>
      </form>
      <div id="c2" class="cell">
        <div class="content">
          <!-- &nbsp; -->
        </div>
      </div>
      <div id="c3" class="cell">
        <div class="content">
           Dolore magna aliqua. Ut enim ad minim veniam, 
           quis nostrud exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis aute irure 
           dolor in reprehenderit.
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

这与计算vertical-align: bottom的方式有关 - 请参阅mdc docs，当应用于表格单元格时，bottom“将单元格的底部填充边缘与底部对齐行“。

当表格单元格没有内容时，框中不会填充填充（即，如果有内容，则浏览器计算填充的位置）。

使用 元素，有内容可用作对齐的基础;没有它你会注意到浏览器将元素本身的底部与其他元素中第一行内容的底部对齐。

re：您链接到的问题，使用vertical-align: top有效，因为布局是根据块元素的顶部计算的，而不是它们包含的内容。

该问题的一个简单修复是将样式表中的.content div添加填充，然后使它们呈现为好像有内容，这意味着您不需要 个当没有什么可显示时你的代码：

  div.content {
    height:   150px;
    padding-bottom: 1px;
  }

试试这个，你会发现它的行为与你期望的一样。

因此;不是真正的浏览器错误，因为浏览器试图根据元素的内容（或填充的底部）计算位置，并且元素没有内容。在这种情况下，可能是规范的无意识的副作用。

在相关说明中，您的css规则div.cell与第一个“单元格”不匹配，后者是form元素。这是有效的，因为display: table元素中的所有元素都会自动应用display: table-cell，但不是最好的。

表格单元格布局和空div的奇怪行为

1 个答案: