Question

＆＃13;

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

＆＃13;

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

具体来说，iPad 8或更低版本只是没有任何内容。我知道错误的具体属性，它是display: -webkit-box;。我可以将/* autoprefixer: off */添加到故障选择器（.row）以防止该类上的所有自动修复，但我真的不想更改引导核心文件，我认为它会明智地留下其余的前缀用于其他浏览器支持。

我无法想出一种方法，可以优雅地优先覆盖/删除display: -webkit-box属性。来自观众的任何想法？ autoprefixer中是否有一些我不知道的自定义？答案提前得到赞赏！

Answer 1

发现它，它正好在我面前，正如我想的那样。

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

flexbox: "no-2009",

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

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

检查＆＃34;禁用＆＃34;关于Autoprefixer的Github自述文件的部分： https://github.com/postcss/autoprefixer#disabling

Bootstrap 4 + Autoprefixer =破旧的iPad

1 个答案: