Flexbox：Autoprefixer添加一个破坏Safari的css属性 [英] Flexbox: Autoprefixer adding a css property that is breaking Safari

问题描述

当我添加

   display: flex;

对我的容器div，autoprefixer（我使用Grunt withgrunt-autoprefixer：^ 3.0.3）添加：

To my container div, autoprefixer (I'm using Grunt with "grunt-autoprefixer": "^3.0.3") adds:

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;

问题是，我的布局在Safari中打破了

The problem is, my layout breaks in Safari with

  display: -webkit-box;

如果我离开它显示：-webkit-flex一切都很好。关于如何禁用此功能的任何想法？

If I leave it display: -webkit-flex all is well. Any thoughts on how to disable this?

推荐答案

原始海报在他们的评论中回答这个问题， （8反正）想要 -webkit-flex ，自动前缀混合器没有吐出取决于你的设置（或者也许，在所有，我没有实际尝试修改设置）。如果你的CSS看起来像：

The original poster kind of answered this in their comment, but just to review, Safari (8 anyway) wants -webkit-flex, which autoprefixer isn't spitting out depending on your settings (or maybe at all, I didn't actually try tinkering with the settings). If your CSS looks like:

display:flex;
display:-webkit-flex;

似乎修复它，因为自动调整输出现在是：

it seems to fix it, as the autoprefixer output will now be:

display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;

与任何其他flexbox属性相同，因此：

Same for any other flexbox properties, so:

display:flex;
display:-webkit-flex;
flex-direction:column;
-webkit-flex-direction:column;
justify-content: center;
-webkit-justify-content:center;

这篇关于Flexbox：Autoprefixer添加一个破坏Safari的css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！