Html Chrome和Safari渲染之间的元素高度差异

在上图中，Chrome位于左侧，Safari位于右侧。我的代码中的

包装器
（绿色）元素在Chrome和Safari中呈现出不同的高度

关于stackoverflow的其他类似问题直接涉及到这一点。我应用了这里给出的解决方案，为所有元素添加了特定的高度，并使它们
display:flex

我需要做什么才能使
包装器
元素在Chrome和Safari中呈现相同的高度


.block、.level-1、.super-wrapper、.wrapper、.wrapper-initial、.initial{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.街区{
边框：1px实心#C4C4；
高度：2米；
宽度：4em；
}
.一级{
高度：3em；
}
.超级包装{
高度：3em；
字号：0.4em；
}
.包装纸{
背景色：#8fbc8f；
高度：3em；
宽度：3em；
}
.包装纸首字母{
高度：2米；
}
.首字母{
高度：2米；
}

X
问题在于Safari和Chrome对元素使用不同的字体大小。使用
em
时，它会缩放到当前元素的字体大小

要解决问题，请确保每个浏览器中元素的字体大小相同，或者使用
rem
作为一个单元
rem
始终使用文档的根字体大小

问题在于Safari和Chrome对元素使用不同的字体大小。使用
em
时，它会缩放到当前元素的字体大小

要解决问题，请确保每个浏览器中元素的字体大小相同，或者使用
rem
作为一个单元
rem
始终使用文档的根字体大小

问题在于使用
em
时没有统一基础（重置），如果您在DevTools中选中
计算的
样式选项卡，您会发现
字体大小：0.4em计算为不同的
px
值

您不想使用
px
，但仍然想使用
em
？您只需添加：

html {
  font-size: 16px; // or any value you want!
}


html{
字体大小：16px；
}
.block、.level-1、.super wrapper、.wrapper、.wrapper initial、.initial{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.街区{
边框：1px实心#C4C4；
高度：2米；
宽度：4em；
}
.一级{
高度：3em；
}
.超级包装{
高度：3em；
字号：0.4em；
}
.包装纸{
背景色：#8fbc8f；
高度：3em；
宽度：3em；
}
.包装纸首字母{
高度：2米；
}
.首字母{
高度：2米；
}

X
问题在于使用
em
时没有统一基础（重置），如果您在DevTools中选中
计算的
样式选项卡，您会发现
字体大小：0.4em计算为不同的
px
值

您不想使用
px
，但仍然想使用
em
？您只需添加：

html {
  font-size: 16px; // or any value you want!
}


html{
字体大小：16px；
}
.block、.level-1、.super wrapper、.wrapper、.wrapper initial、.initial{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.街区{
边框：1px实心#C4C4；
高度：2米；
宽度：4em；
}
.一级{
高度：3em；
}
.超级包装{
高度：3em；
字号：0.4em；
}
.包装纸{
背景色：#8fbc8f；
高度：3em；
宽度：3em；
}
.包装纸首字母{
高度：2米；
}
.首字母{
高度：2米；
}

X
什么不起作用？你的期望是什么？你能提供更多关于chrome和safari行为的信息和截图吗？什么不起作用？你的期望是什么？你能提供更多关于chrome和safari行为的信息和截图吗？