CSS手动书写兼容性样式自动消失了

使用vue+webpack2的技术开发出来的项目，同样的package.json，只是在不同的机器上编译，编译出来的却不一样

看区别

  • 其中一台机器A编译后的css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .tab-nav a {
        height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
        color: #8d8c92;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.06);
    }

  • 另外一台机器B编译后的css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .tab-nav a {
        height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -ms-flex: 1;
        flex: 1;
        color: #8d8c92;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.06);
    }

  • 源码是这样写的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .tab-nav a {
    	height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -webkit-flex: 1;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
        color: #8D8C92;
        box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.06);
    }

  • 从上面的编译结果验证，B机器编译出来的是兼容性较差的，所以在项目如果没有添加自动加前缀配置的情况下，我们需要注意编译环境的差异会导致编译结果不同。A机器的编译环境是webpack 2.4.1、node 6.10.1，B机器？？