Flexbox：Autoprefixer 添加了一个破坏 Safari 的 css 属性

Posted 2023-03-07

【中文标题】Flexbox：Autoprefixer 添加了一个破坏 Safari 的 css 属性

【英文标题】：Flexbox: Autoprefixer adding a css property that is breaking Safari

【发布时间】：2015-09-01 10:16:31

【问题描述】：

当我添加时

   display: flex;

在我的容器 div 中，autoprefixer（我正在使用带有“grunt-autoprefixer”的 Grunt：“^3.0.3”）添加：

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

问题是，我的布局在 Safari 中因

而中断

  display: -webkit-box;

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

【问题讨论】：

“中断”是什么意思？你能加入minimal, complete, and verifiable example吗？

对不起，意思是：盒子位于容器之外。事实证明，我需要更改-webkit-box（用于旧版浏览器）和-webkit-flex 的顺序。 -webkit-flex 应该是最后一个，否则 Safari 会读取旧版本。

【参考方案1】：

原始发帖人在他们的评论中回答了这个问题，但只是为了回顾一下，Safari（无论如何是 8 个）想要 -webkit-flex，根据您的设置，哪个自动前缀不会吐出（或者可能根本没有，我没有实际上尝试修改设置）。如果你的 CSS 看起来像：

display:flex;
display:-webkit-flex;

它似乎修复了它，因为自动前缀输出现在将是：

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

对于任何其他 flexbox 属性也是如此，所以：

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