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

Question

在我的网店页面上，8个主要产品类别以及以下产品显示为tiles/boxes。 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

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

这似乎适用于所有浏览器，跨 MS Edge，Chrome 等

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

How to rectify CSS flex issues appearing in MS Edge?

css

google-chrome

flexbox

microsoft-edge