Firefox CSS表格-内容转换_Css_Firefox_Css Tables

Firefox CSS表格-内容转换

css firefox

Firefox CSS表格-内容转换,css,firefox,css-tables,Css,Firefox,Css Tables,当比较Chrome（v56）和Firefox（v51）中的以下代码时，Firefox正在向下移动内容。Chrome的行为与预期一致 <html> <head> <title>Test Page</title> <style type="text/css"> .content { height: 200px; width: 200px; } .table {

当比较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>


测试页
.内容{
高度：200px；
宽度：200px；
}
.桌子{
宽度：100%；
身高：50%；
显示：表格；
}
.leftCell{
边框：1px实心#中交；
宽度：50%；
身高：100%；
溢出：自动；
显示：表格单元格；
}
.rightCell{
宽度：50%；
身高：100%；
显示：表格单元格；
边框：1px实心#中交；
}
一行
一行
一行
一行

铬：

火狐：

该问题仅在“rightCell”div为空时出现。如果删除该div，内容将显示在预期的位置。以前有人经历过这个问题吗？有没有已知的修复方法？

关于

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

为了避免这种情况，请将

垂直对齐：top

分配给两个单元格（请参阅我的代码片段）

.content{
高度：200px；
宽度：200px；
}
.桌子{
宽度：100%；
身高：50%；
显示：表格；
}
.leftCell{
边框：1px实心#中交；
宽度：50%；
身高：100%；
溢出：自动；
显示：表格单元格；
垂直对齐：顶部；
}
.rightCell{
宽度：50%；
身高：100%；
显示：表格单元格；
边框：1px实心#中交；
垂直对齐：顶部；
}


一行
一行
一行
一行

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

为了避免这种情况，请将

垂直对齐：top

分配给两个单元格（请参阅我的代码片段）

.content{
高度：200px；
宽度：200px；
}
.桌子{
宽度：100%；
身高：50%；
显示：表格；
}
.leftCell{
边框：1px实心#中交；
宽度：50%；
身高：100%；
溢出：自动；
显示：表格单元格；
垂直对齐：顶部；
}
.rightCell{
宽度：50%；
身高：100%；
显示：表格单元格；
边框：1px实心#中交；
垂直对齐：顶部；
}


一行
一行
一行
一行

工作起来很漂亮。非常感谢。工作得很漂亮。非常感谢。