Javascript CSS网格中的绝对定位图像在iOS或Safari中的行为很奇怪

我想首先提到我已经看过了，所以我知道Safari（和iOS）处理

height

属性的方式与Chrome不同。然而，这个问题确实感觉有点不同。无论如何：

我有一个用flexbox设计的项目列表。每个条目都是一个包含各种类型信息的网格。但是，每个条目也包含一个图像，该图像绝对相对于网格定位，使其向左突出一点。可以找到一个如何工作的示例。这在Chrome中运行良好，看起来和预期的一样，但在Safari中看起来很奇怪。尽管Safari不使用网格容器作为图像的相对高度（其属性为

height:80%

），但图像似乎与网格对齐良好。但是，所有其他条目都与页面的整个主体对齐。当检查网格时，它看起来并没有占据整个页面，但其他组件似乎认为它占据了整个页面

为什么图像看起来正常，而其他组件则不正常？此外，有人知道解决这个问题的方法吗？我更希望图像高度可以保持为一个百分比，因为我想在代码的其他部分重复使用该组件

多谢各位

编辑：以下是示例中显示Chrome和Safari之间差异的图像

铬：

狩猎：

---

编辑2：我仍然不知道为什么会发生这种情况（我很想知道为什么），但我确实找到了解决问题的办法。通过设置列表项的特定高度（例如，使用

网格模板行：50px；

），图像大小将正确缩放到网格行，其他组件将正确放置。

您的html结构和应用的css将丢失，屏幕截图本身对我们帮助不大。@G-Cyrillus我在文本中链接到一个JSFIDLE（屏幕截图来自该FIDLE），但我可以为您和其他读者更清楚地标记它。它使帮助者更容易，并避免打开x窗口；）