zoukankan      html  css  js  c++  java
  • 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;
        }
    

      

  • 相关阅读:
    各种排序算法的时间复杂度
    svn版本管理系统出现的问题解决办法
    算法时间复杂度
    js处理时间戳显示的问题
    cache缓存的BUG
    使用phpstorm提交svn代码版本管理系统遇到的问题解决办法
    20161101.20161115这两周的开发总结
    mac 上安装 redis
    终极 shell zsh
    在 mac 上利用 homebrew 安装软件
  • 原文地址:https://www.cnblogs.com/wufenfen/p/13815529.html
Copyright © 2011-2022 走看看