Question

我的设置
Vue CLI 3 所有默认配置（autoprefixer，postcss等）

我的问题
三星互联网版本> 7 display：flex的css输入仅输出“ display：ms-flexbox”，我需要“ display：-webkit-flex”来显示..尽管配置选项和浏览器列表没有进行任何排列，但我似乎无法测试...不确定我在这里缺少什么。

效果
我的Vue Spa Sidenav菜单弄乱了仅在三星互联网上的布局，我确定是因为它需要我似乎无法产生的-webkit-flex前缀

我确定“ autoprefixer”下的“浏览器”配置项是多余的，无论有没有，我的输出都是相同的。

排除“ 2009年否”只会添加一个“显示：-webkit-box”，对您完全没有帮助

Answer 1

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

justify-content: space-evenly;很可能是您遇到的问题。尚不完全支持所有浏览器。

您已列出需要支持IE的最后2个版本。这表示IE 10和11。我非常确定这些浏览器都不支持justify-content: space-evenly;，因为它是该规范的较晚版本。如果您在这些浏览器中进行测试，那么在该浏览器中也应该看起来很破损。

在其上方添加justify-content: space-around;作为备份。它的工作方式几乎相同，但空间分配却有所不同。

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

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

在需要回退的浏览器中，它看起来不像在不需要回退的浏览器中那样好。有了后备功能，看起来比没有后备更好。

Answer 2

Answer 3

Daniel是完全正确的，Samsung Browser 7.2在'justify-content：space-evenly'上表现不佳。.Safari的某些版本也没有（我们在办公室里有人在我的iphone上给我看，但是我尚未获取浏览器版本）。

我最终解决的方法是在元素的：before和：after psuedo元素上使用“ display：block”进行“中间间隔”攻击。

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

到目前为止，所有经过测试的设备（包括三星浏览器7.2和同一个办公伴侣的iphone浏览器（无论是Safari还是非Safari）都可以像魅力一样工作