css - Bootstrap 4 + Autoprefixer = 损坏的旧版 iPad

Question

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

所以...有点奇怪的问题。我们最近在我的公司采用了 Bootstrap 4 和 Flex 模型，我们注意到当 Bootstrap 和 Autoprefixer 协同工作时有些奇怪。

具体来说，iPad 版本 8 或更低版本没有任何这些功能。我知道有问题的具体属性是 display: -webkit-box;。我可以将 /* autoprefixer: off */ 添加到错误的选择器 (.row) 以防止该类上的所有自动前缀，但我真的不想更改 Bootstrap 核心文件，而且我'认为将其余前缀留给其他浏览器支持是明智的。

我想不出一种方法来优雅地覆盖/删除 display: -webkit-box 属性。观众有什么想法吗？ autoprefixer 中是否缺少我缺少的一些自定义设置？预先感谢您的回答!

Answer 1

找到了，它就在我面前，正如我所料。

Autoprefixer 有一个选项可以添加到 gulp 任务中:

flexbox: "no-2009",

添加它并保留 -ms-flexbox 和 -ms-flex-wrap 属性并删除 display: -webkit-box 一个。

希望这可以帮助任何在未来挣扎的人。

检查 Autoprefixer 的 Github 自述文件中的“禁用”部分: https://github.com/postcss/autoprefixer#disabling