Vue cli 3 postcss display:flex 问题

Question

我的设置
客户端 3 所有默认配置（autoprefixer，postcss，等）

我的问题
三星互联网版本 > 7 display:flex 的 css 输入仅输出 "display: ms-flexbox" 我需要 "display: -webkit-flex" 显示..尽管我似乎测试了配置选项和浏览器列表的任何安排，但它不会out...不确定我在这里遗漏了什么。

效果
我的 vue spa sidenav 菜单布局混乱 仅在三星互联网上 ，我确定这是因为它需要我似乎无法生成的 -webkit-flex 前缀

我确信 "autoprefixer" 下的 "browsers" 配置项是多余的，使用和不使用它我的输出都是一样的。

去掉"no-2009"只会增加一个"display: -webkit-box"，一点帮助都没有

Answer 1

Answer 2

在 GitHub 问题中，您在代码示例中使用了 justify-content: space-evenly;。

justify-content: space-evenly; 很可能是您的问题。它还没有完全支持所有浏览器。

您已列出您需要支持 IE 的最后两个版本。这意味着 IE 10 和 11。我很确定这两种浏览器都不支持 justify-content: space-evenly;，因为它是规范的后期添加。如果您在这些浏览器中进行测试，它应该也会在那里损坏。

在上面添加justify-content: space-around;作为备份。它的工作方式几乎相同，但 space 的分布略有不同。

ul {
  justify-content: space-around;
  justify-content: space-evenly;
  /* ... The rest of the CSS... */
}

它需要按此顺序放置，以便如果浏览器支持它，它将使用 justify-content: space-evenly;，如果不支持，它将退回到使用 justify-content: space-around;。

它在需要回退的浏览器中看起来不如在不需要回退的浏览器中好看。不过，使用后备看起来会比没有后备好得多。

Answer 3

Daniel 完全正确，Samsung Browser 7.2 不能很好地与 'justify-content: space-evenly' 配合使用。某些版本的 safari 也不行（我们办公室里的人向我展示了他们的 iphone但我还没有抓到浏览器版本。

我最终采用的修复方法是对元素的 :before 和 :after 伪元素进行 'space-between' 黑客攻击。

2 个指向我了解到此问题的其他堆栈溢出帖子的链接是：

到目前为止，在所有经过测试的设备上，包括三星浏览器 7.2 和同一个办公室伙伴的 iphone 浏览器（无论是哪个，safari 与否）都非常有效

Vue cli 3 postcss display:flex issue