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

【问题标题】：Strange behavior with table-cell layout and empty div表格单元格布局和空 div 的奇怪行为
【发布时间】：2012-11-28 07:06:13
【问题描述】：

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

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

问题：如果我在第二个表格单元格中的&nbsp; 中发表评论，一切都很好。但是，如果 div 保持为空，则其他两个单元格的内容类似于“偏移顶部”。此偏移量与中间单元格的高度具有相同的尺寸。 IE。外部单元格的内容移到底部。我添加了两个截图 div_not_empty.png 和 div_empty.png。

谢谢

更新我忘记截图了。他们来了：

代码：

<!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>

【问题讨论】：

标签： html css

【解决方案1】：

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

当表格单元格没有内容时，框内不绘制内边距（即当为0时，如果有内容，浏览器会计算内边距的位置）。

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

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

解决此问题的一个简单方法是在样式表中的 .content div 中添加填充，然后使它们呈现为好像它们有内容一样，这意味着您不需要在代码中包含 &nbsp;当没有什么可以显示时：

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

试试这个，你会发现它的行为符合你的预期。

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

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

【讨论】：

谢谢，这让它更清楚了。是的，表单元素在那里，因为我从编辑器中复制了错误的版本，抱歉。