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>

铬：

火狐：

问题仅在'rightCell'div为空时出现。如果我删除该div，内容将显示在预期的位置。以前有人遇到过这个问题吗？对此有任何已知的修复？此致

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Firefox CSS表 - 内容转移

1 个答案: