在 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，内容将显示在预期位置。 以前有人遇到过这个问题吗？有什么已知的修复方法吗？ 问候
最佳答案
这是因为表格单元格的内容沿其基线垂直对齐。如果其中有文字，那就是第一行。如果其中没有文本，那就是单元格的底部边框，您可以在发布的图片中看到它。这就是显示您的代码段结果的原因。
为避免这种情况，将 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>关于css - Firefox CSS 表格 - 内容转移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42334730/