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) 以防止在 class 上的所有自动前缀，但我真的不想更改 bootstrap 核心文件，而且我'我认为将其余前缀留给其他浏览器支持是明智的。

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

Answer 1

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

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

flexbox: "no-2009",

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

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

检查 Autoprefixer Github 自述文件中的 "Disabling" 部分： https://github.com/postcss/autoprefixer#disabling

Bootstrap 4 + Autoprefixer = 损坏的旧版 iPad

Bootstrap 4 + Autoprefixer = Broken legacy iPads

css

flexbox

autoprefixer

bootstrap-4