时间戳

首页 > 解决方案 > 如何纠正 MS Edge 中出现的 CSS flex 问题？

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

问题描述

在我的在线商店页面上，8 个主要产品类别以及以下产品显示为瓷砖/盒子。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%;
}

网站商店页面可以在这里找到。我很感激任何有用的提示和想法。谢谢！

标签： cssgoogle-chromeflexboxmicrosoft-edge

解决方案

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

这似乎在所有浏览器中都可以正常工作，包括 MS Edge、Chrome 等。

推荐阅读