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

查了下资料,自己解决出来了,整理如下:

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;
}

  

Windows和Mac两种操作系统下CSS不兼容问题的解决的更多相关文章

  1. Windows提供了两种将DLL映像到进程地址空间的方法(隐式和显式)

    调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载 ...

  2. Windows提供了两种将DLL映像到进程地址空间的方法

    调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载 ...

  3. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

  4. Notepad++中Windows,Unix,Mac三种格式

    Notepad++中Windows,Unix,Mac三种格式之间的转换 http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htm ...

  5. Atitit 如何创新 创新只有在两种条件下发生:自由、效率。

    Atitit 如何创新 创新只有在两种条件下发生:自由.效率. 创新是如何发生的呢? 创新只有在两种条件下发生:自由.效率.在自由的环境下,对效率的追逐等于创新.如果你不自由,你的思想不够开阔,你脑洞 ...

  6. 【转】Notepad++中Windows,Unix,Mac三种格式之间的转换

    原文网址:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_func_windows_unix_mac.ht ...

  7. 手把手教你如何安装Tensorflow(Windows和Linux两种版本)

    tensorflow 不支持Python2.7,最好选择下载Python3.5 现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通 ...

  8. Tensorflow从0到1(一)之如何安装Tensorflow(Windows和Linux两种版本)

    现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通过这篇文章来简单介绍一下,关于如何搭建Tensorflow以及如何进行使用.建议 ...

  9. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...

随机推荐

  1. 深入浅出Calcite与SQL CBO(Cost-Based Optimizer)优化

    目录 Calcite简介与CBO介绍 Calcite背景与介绍 SQL优化与CBO Calcite优化器 HepPlanner优化器与VolcanoPlanner优化器 Calcite优化样例代码介绍 ...

  2. Linux实战(19):Shell交互式read 用法

    read 用法有好几种,我在实战过程中用到了 -p,记一笔以防不用忘记了. 实例 #!/bin/bash echo "检测IP是否被占用" while read -p " ...

  3. docker自己部署一个项目

    老祖宗的话说得好呀:实践出真知 自己打个简单的镜像运行  遇到了一堆破问题 学习docker主要在菜鸟教程  https://www.runoob.com/docker/docker-containe ...

  4. 5.Storm-集群配置及任务提交

  5. python常用os模块

    OS 模块 #os模块就是对操作系统进行操作,使用该模块必须先导入模块: import os #getcwd() 获取当前工作目录(当前工作目录默认都是当前文件所在的文件夹) result = os. ...

  6. phpStudy8.1.0.1配置子域名多网站

    版本 这里phpStudy版本为8.1.0.1: 步骤 假设域名为:domain.com:公网IP地址为:42.33.33.33 首先云解析中配置,添加子域名A记录直接指向你的公网IP: ep.dom ...

  7. C#编写一个较完整的记事本程序

    开发环境 Visual Studio 2019 至少需安装 .NET桌面开发 创建项目并配置 创建窗体文件 配置项目名称及框架 设计界面 创建窗体文件,将控件摆放位置如下,参考系统自带的记事本程序 窗 ...

  8. requests和正则表达式爬取猫眼电影Top100练习

    1 import requests 2 import re 3 from multiprocessing import Pool 4 from requests.exceptions import R ...

  9. Java知识系统回顾整理01基础05控制流程05 continue

    continue:继续下一次循环 一.continue 题目: 如果是双数,后面的代码不执行,直接进行下一次循环 要求效果: 答案: public class HelloWorld { public ...

  10. python 给IDLE添加行号

    [LineNumbers] enable=1 enable_editor=1 enable_shell=1 visible=1 [LineNumbers_cfgBindings] linenumber ...