3

我只是偶然发现了一个使用table-cellcss 属性的布局的非常奇怪的行为。我在当前的 FF、Safari 和 Chrome 中尝试了以下代码。行为在任何地方都是相同的。

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

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

谢谢

更新 我忘记了截图。他们来了： 分区为空 div 不为空

代码：

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

1 回答 1

6

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

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

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

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

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

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

试试这个，你会看到它的行为符合你的预期。

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

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

于 2012-11-27T22:37:42.417 回答