Html 网格中的图片在不同的浏览器中显示不同

所以我试着用一些图标做一个网格：

.wrapper{
边框：中等纯黑；
溢出：隐藏；
}
.集装箱{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
垫面：56.25%；
字体大小：1vmax；
}
.图标包装{
位置：绝对位置；
排名：0；
左：0；
身高：80%；
宽度：98%；
填充：1%；
文本对齐：居中；
空白：nowrap；
指针事件：无；
显示：网格；
网格模板行：重复（7,14.2857%）；
网格模板列：重复（12，1fr）；
网格自动流：列；
差距：1%；
}
.图标项目{
身高：80%；
指针事件：自动；
}
.图标项目包装器{
高度：计算（100%-1米）；
}
.图标项目图标{
身高：100%；
}

正文
正文
正文
正文
正文
正文
正文
正文
正文

我同意

显示：网格

有点原始，但它已经是一个非常好和强大的工具。但是，在这种情况下，存在自动缩放或内部子标签

正文
正文
正文
正文
正文
正文
正文
正文
正文

太棒了！非常感谢你！但有一个小问题：为什么设置

网格模板行：重复（7，1fr）而不是
14.2857%
生成不同的结果？前者似乎不尊重网格的高度（80%）。哦，不！现在Safari中的内容再次泛滥…答案更新了很多。请看。