兼容性问题

最新推荐文章于 2023-06-16 17:09:13 发布

qq_30856231

最新推荐文章于 2023-06-16 17:09:13 发布

阅读量835

点赞数 1

分类专栏：兼容性问题文章标签：兼容性 scrolltop 图片变灰页面灰色

本文链接：https://blog.csdn.net/qq_30856231/article/details/78389993

版权

兼容性问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如果页面内容是后期渲染出来的，需要换一种写法

$("#checkboxAll").on("click",function () {})
改为：
$("#sendFileTable").on("click","#checkboxAll",function () {})

IE8有时候不存cookie,不报存会话，导致需要重复登录或用户信息失效

1.点击“工具→Internet选项”命令，打开“Internet选项”窗口点击“隐私”选项
2.在打开“Internet选项”的“隐私”选项卡点击“高级”按钮
3.在弹出的“高级隐私策略设置”窗口勾选“替代自动Cookie处理”复选框
4.将下面的“第一方cookie”、“第三方cookie”均设置为“接受”
5.选中“总是允许会话cookie”
6.确定后重启IE8。即可解决这个故障了
解决方法：https://blog.csdn.net/sjsm2007/article/details/17958145.

IE8下JSON.stringify转换,中文会转成unicode

将 var data = JSON.stringify() 改为

eval("var str = '" + JSON.stringify(structure) + "';");

注意！！！
obj中的内容中的单引号'最好替换成双引号"，不然会和外层的单引号'优先匹配，报错。过滤掉就好了。

function filterIllegalCharacters(data){
  var s = JSON.stringify(data);
  var pattern = new RegExp("[<%>']");
  var rs = "";
  for (var i = 0; i < s.length; i++) {
    rs = rs + s.substr(i, 1).replace(pattern, '');
  }
  return JSON.parse(rs);
}

ajax请求在ie8下缓存问题

ajax请求在ie8下有缓存，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。

以下解决方法二选一。

$.ajax({
    url: "/ajax/query?t=" + new Date().getTime(),  // 解决方法一：加参数，当时间戳
    type: 'get',
    data: {"params": params},
    cache:false,    // 方法二： 加cache:false。
    success: function(data){
      down("info",data);
    }
  });

判断浏览器类型

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
//判断是否Opera浏览器
if (isOpera) {
  return "Opera"
};
//判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -1) {
  return "FF";
}
//判断是否chorme浏览器
if (userAgent.indexOf("Chrome") > -1){
  return "Chrome";
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -1) {
  return "Safari";
}
//判断是否IE浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
  return "IE";
}
//判断是否Edge浏览器
if (userAgent.indexOf("Trident") > -1) {
  return "Edge";
}

Firefox下载文件时中文名乱码问题

eq:chrome、IE下载文件时，文件名正常。Firefox下载时，文件名乱码
解决方法：https://www.cnblogs.com/godtrue/p/4333262.html
or:为浏览器原因，可不予解决

IE8下返回原页面刷新。取消IE浏览器的默认行为

eg:关闭弹框后.form表单触发默认提交，发post请求，跳转页面，导致出错。由于事件的默认行为导致。
注意form表单的默认提交行为

 //上传附件
$("#btn").on("click", function(e){
  stopDefalut(e);
  ...（其他操作）
})
//兼容
function stopDefalut(evt){
    var e=evt||window.event;
    if(e.preventDefault()){
        e.preventDefault();
    }else {
        e.returnValue=false;
    }
}

IE8下中文字符存数据库时出现乱码或base64解码后处理方法

用eval()方法处理

var str = eval(oldStr);
var newJson = JSON.stringify(eval(param.oldjson));

IE8下图标不显示在css加这一段 iconfont图标

/*字体图标 start*/
@font-face {font-family: 'iconfont';
  src: url('../lib/icon_font/font/iconfont.eot'); /* IE9*/
  src: url('../lib/icon_font/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../lib/icon_font/font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../lib/icon_font/font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../lib/icon_font/font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */          }
/*字体图标 end*/

IE浏览器报错

要把代码中的 console.log() 去掉，否则报错

IE8 兼容对象报错 SCRIPT5007: 无法获取未定义或 null 引用的属性“task_type”


var data =  [
      {id: 1, title: '内容内容内容'},
      {id: 2, title: '内容内容内容'},
      {id: 3, title: '内容内容内容'},
      {id: 4, title: '内容内容内容'},
      ];

function generateTable(list){
  var htmlStr = '';
  for(var i = 0; i < list.length; i++) {
    console.log(list[i]);
    if(list[i].task_type == '督查事项') {
      var type = 'item';
    } else if(list[i].task_type == '决定督查') {
      var type = 'decision';
    }
  }
}

报错：SCRIPT5007: 无法获取未定义或 null 引用的属性“task_type”
原因：数组对象json串中最后一个不能有逗号。
改为：去掉逗号

var data =  [
      {id: 1, title: '苏州市2017年度诚信计量示范单位申报'},
      {id: 2, title: '苏州市2017年度诚信计量示范单位申报'},
      {id: 3, title: '苏州市2017年度诚信计量示范单位申报'}
      ];

阴影

.nav{
  width:200px;
  height:100%;
  box-shadow:1px 0px 10px 0px rgba(236, 238, 240, 1);
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=0,Strength=10)/*上面有阴影*/
    progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=90,Strength=10)/*右边有阴影*/
    progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=180,Strength=10)/*下边有阴影*/
    progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=270,Strength=10)/*左边有阴影*/
  /*要注意，color不能缩写，比如#000000不能缩写为#000不然会出问题，设置失效。*/
}

includes不兼容IE8，用indexOf()

    indexOf() true为>0 
    indexOf() false为<0  所以判断用
    if(url.indexOf(flag) > 0){ }

opacity 兼容

    opacity{
        opacity:0.5;
        filter:alpha(opacity=50);  //filter 过滤器   兼容IE678
    }

a 标签下包含 div 在低版本IE浏览器有兼容问题

【解决：】把a标签替换掉或把div替换成span标签

var html = '<div class="msg_item_down">' +
  '              <a href="#">' +
  '                <div class="msg_content">' + message.content + '<nobr class="time">' + message.sendTime + '</nobr></div>' +
  '              </div>' +
  '            </a>';
$('.msg_down').append(html);

display flex 兼容支持IE10/11

    .box{
        display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;     /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;  /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
    }

border-radius

兼容IE9以上
https://www.cnblogs.com/mengfangui/p/6605761.html

IE8 filter 兼容

background:rgba(0,0,0,0.3)

rgba 兼容IE8以上浏览器
https://www.cnblogs.com/mengfangui/p/6593086.html

处理
background: rgba(0, 0, 0, 0.5); /*下一句关键设置*/ filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，
但是这个地方不需要渐变，所以两个颜色都设置成了相同的颜色。
这个颜色“#7f000000”是由两部分组成的。
第一部是#号后面的7f 。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

      rgba透明值：0.1　　0.2　　0.3　　0.4　　0.5　　0.6　　0.7　　0.8　　0.9
    IE下filter值：19　　 33　　 4c　　 66　　  7f　　 99　　 b2　　 c8　　  e5
即：alpha*255得到的值再转换为16进制即可。
第二部分是7f后面的六位 是六进制的颜色值，跟rgb函数中的取值相同，比如rgb(255,255,255)对应#ffffff。

overflow-x 兼容

支持IE10，IE11

summernote 富文本编辑器

兼容性：支持IE 9、10、11

设置phpstorm 兼容 .vue 的html页面：
setting plugin 下载 vue.js

若有的功能之前好好的，某一天突然就出问题，可能是兼容性问题

谷歌浏览器的float:left 与火狐浏览器的不同

解决iphone safari上的圆角问题兼容

圆角在苹果上不管用，怎么解决
-webkit-appearance : none ; /*解决iphone safari上的圆角问题*/

获取scrollTop值兼容

完美的获取scrollTop 赋值短语：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

使页面全灰（博文末尾附grayscale.js）

http://blog.csdn.net/qq_30856231/article/details/78983040