css - autoprefixer添加的前缀不完整

问题描述

问 题

使用gulp插件autoprefixer时，添加的前缀不足。只有部分添加了前缀
代码如下：

var inputDir = './build/css/*.css';//输入
var outputDir = './publish/css';//输出
var options = {
    browsers: ['last 2 versions', 'Android >= 4.0', "ff > 20"],
    cascade: true, //是否美化属性值 默认：true 像这样：
    //-webkit-transform: rotate(45deg);
    //        transform: rotate(45deg);
    remove: true //是否去掉不必要的前缀 默认：true
};

效果如下
使用前：
.m_tipBox { transform: translate(-50%, -50%); }

使用后：
.m_tipBox { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

可以看到gulp是生效了，但是只添加了一种前缀（Webkit内核：前缀为-webkit）。
没有添加其他浏览器的前缀，如
Trident内核：前缀为-ms 主要代表为IE浏览器
Gecko内核：前缀为-moz 主要代表为Firefox
Presto内核：前缀为-o 主要代表为Opera

是我gulp写的不对吗？但是明明写了"ff > 20"了呀，至少会添加-moz的前缀吧
求解

解决方案

http://caniuse.com/#search=tr...
根据caniuse
firefox要版本号15之前的才需要-moz前缀

这篇关于css - autoprefixer添加的前缀不完整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！