Firefox CSS table - 内容转移

Question

比较 Chrome (v56) 和 Firefox (v51) 中的以下代码时，Firefox 正在向下移动内容。 Chrome 表现符合预期。

<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
    .content {
        height: 200px;
        width: 200px;
    }
    .table {
        width: 100%;
        height: 50%;
        display: table;
    }
    .leftCell {
        border: 1px solid #cccccc;
        width: 50%;
        height: 100%;
        overflow: auto;
        display: table-cell;
    }
    .rightCell {
        width: 50%;
        height: 100%;
        display: table-cell;
        border: 1px solid #cccccc;
    }
</style>
</head>
<body>
<div class="content">
    <div class="table">
        <div class="leftCell">
            <div>row</div>
            <div>row</div>
            <div>row</div>
            <div>row</div>
        </div>
        <div class="rightCell"></div>
    </div>
</div>
</body>
</html>

Chrome:

火狐：

只有当'rightCell' div为空时才会出现这个问题。如果我删除 div，内容将显示在预期位置。以前有人遇到过这个问题吗？有什么已知的修复方法吗？问候

Answer 1

这是因为 table 单元格的内容沿其基线垂直对齐。如果其中有文字，那就是第一行。如果其中没有文本，那就是单元格的底部边框，您可以在发布的图片中看到它。这就是显示您的代码段结果的原因。

为避免这种情况，将 vertical-align: top 分配给两个单元格（参见我的代码片段）

.content {
  height: 200px;
  width: 200px;
}

.table {
  width: 100%;
  height: 50%;
  display: table;
}

.leftCell {
  border: 1px solid #cccccc;
  width: 50%;
  height: 100%;
  overflow: auto;
  display: table-cell;
  vertical-align: top;
}

.rightCell {
  width: 50%;
  height: 100%;
  display: table-cell;
  border: 1px solid #cccccc;
  vertical-align: top;
}

<div class="content">
  <div class="table">
    <div class="leftCell">
      <div>row</div>
      <div>row</div>
      <div>row</div>
      <div>row</div>
    </div>
    <div class="rightCell"></div>
  </div>
</div>

Firefox CSS table - 内容转移

Firefox CSS table - content shifts

css

firefox

css-tables