Windows和Mac两种操作系统下CSS不兼容问题的解决

这两天碰到一个问题，就是一个小图标的大小和定位的位置在不同的操作系统下是不一样的。

查了下资料，自己解决出来了，整理如下：

html：

<i :class="['cursor-pointer', {'windows' : windows}, {'mac': mac}]" 
　　　　@click="openProductDetail(scope.row.replaceProducts[0].replaceProductId)"
       v-if="scope.row.replaceProducts && scope.row.replaceProducts.length > 0">替代物料
</i>

　js如下：

export default {
    data() {
         return {
           windows: false,
           mac: false 
         };
     },
　　
　　 created ( ) {
       this.init( );
    },
 
　　methods: {
       init ( ) {
           if (navigator.userAgent.indexOf('Mac OS') !== -1) {
               this.mac = true;
           } else {
               this.windows = true;
           }
       }
　　},
 
}

　　css代码部分如下：

 // 当在windows系统下的替代物料位置
    .el-table .cell i {
        font-style: normal;
        display: inline-block;
        padding: 0 .03rem 0 .20rem;
        position: absolute;
        background: url('~@/assets/ac-b2bpc/images/replace.png') no-repeat;
        // background-size: 1.4rem .70rem;
        background-size: .71rem .30rem;
        background-size: cover;
        font-size: .06rem;
        top: .09rem;
        right: -.18rem;
        z-index: 10;
        color: #fff;
    }
    // 当在windows系统下的替代物料位置，上面的就是默认是w
    // .el-table .cell .windows{
    // }

    // 当在mac系统下的替代物料的位置
    .el-table .cell .mac{
      color: blue;
    }