css - 如何纠正 MS Edge 中出现的 CSS flex 问题？

Question

在我的在线商店页面上，8 个主要产品类别以及下面的产品显示为图 block /框。 CSS 已经针对我安装的 Chrome(版本 79.0.3945.79)以及我安装的 Safari(版本 13.0.3)浏览器进行了优化并且运行良好。然而，在 Microsoft EDGE(版本:17.17134)中查看时，商店页面完全困惑。

我试图更改 tile 元素的 CSS，但这会破坏 Chrome 等的外观。但由于我对 flexbox 的了解有限，我不确定从哪里开始。

我在找 1) 导致错误的 CSS 选择器，以及 2) 一种在不更改 Chrome CSS 设置的情况下解决 MS Edge 中此错误的方法。

我怀疑是以下原因导致了这个问题:

@media screen and (min-width:850px)
.gallery-columns-4 .gallery-item, .large-columns-4 > .col, .large-columns-4 .flickity-slider > .col {
    max-width: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
}

网站店铺页面可以查到here .我很感激任何有用的提示和想法。谢谢!

Answer 1

经过进一步的尝试和错误，我发现了问题。通过将 tile 的父元素 CSS 从 显示: flex ； 到 显示:inline-flex;

这似乎适用于所有浏览器，包括 MS Edge、Chrome 等。