Html 为什么这个表在Chrome和Firefox之间呈现不同？

我有一个表，它在Chrome和Firefox之间的呈现方式似乎有所不同。Chrome输出正确，Firefox输出不正确

正文{
背景色：#e1e1；
换行：打断单词
}
#关于桌子{
保证金：0自动；
}
.小组{
背景色：#F5F6；
边界半径：4px；
盒影：0px 0px 10px 0px rgba（0,0,0,0.75）；
颜色：#1c1c；
利润率：16px；
填充：32px；
文本对齐：居中；
}
.人{
显示：内联；
}
.肖像{
宽度：100%；
}
.肖像容器{
最大宽度：256px；
宽度：50%；
}
.肖像标签{
字号：600；
宽度：128px；
}

第一人
第二人
第三人

应用

显示：内联到一个表行（通过class
.person
）并没有真正的意义-要么使用div并根据它们应用CSS，要么使用“真实”表（即HTML表元素，如
table
、tr
和
td`，因为没有CSS规则）

其他一切，即默认表格布局属性和不同CSS
display
定义的每一个“混合”，都取决于您所体验到的浏览器的容差/解释。但我怀疑这（即
tr
标记及其
display:inline
定义）是“本机”HTML布局属性和CSS的有效组合

例如，我将在div上使用flexbox属性，而不是所有那些不真实的表元素，如下所示：


正文{
背景色：#e1e1；
换行：打断单词
}
#关于桌子{
显示器：flex；
证明内容：中心；
}
.小组{
背景色：#F5F6；
边界半径：4px；
盒影：0px 0px 10px 0px rgba（0,0,0,0.75）；
颜色：#1c1c；
利润率：16px；
填充：32px；
文本对齐：居中；
}
.人{
显示器：flex；
宽度：30%；
对齐项目：居中；
}
.肖像{
宽度：100%；
}
.肖像容器{
最大宽度：256px；
宽度：50%；
}
.肖像标签{
字号：600；
宽度：128px；
}

第一人
第二人
第三人
是什么让您认为Chrome在这里是正确的？您使用的两种浏览器的版本都是什么？大多数带前缀的属性在每个属性的当前版本中都不需要它们browser@PoulBak这可能不是正确的行为，但却是我想要的行为。@j08691我使用的是两种浏览器的最新版本。前缀属性与问题无关，因此我将删除它。我看到的是3个“相同”的表行。为什么第三个与其他两个行为不同？