兼容性问题

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

$("#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

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)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值