.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 中是否缺少我缺少的一些自定义设置?预先感谢您的回答!
最佳答案
找到了,它就在我面前,正如我所料。
Autoprefixer 有一个选项可以添加到 gulp 任务中:
flexbox: "no-2009",
添加它并保留 -ms-flexbox
和 -ms-flex-wrap
属性并删除 display: -webkit-box
一个。
希望这可以帮助任何在未来挣扎的人。
检查 Autoprefixer 的 Github 自述文件中的“禁用”部分: https://github.com/postcss/autoprefixer#disabling
关于css - Bootstrap 4 + Autoprefixer = 损坏的旧版 iPad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45571483/