这些天在改数据平台IE8下的一些兼容问题(js,css),在此把遇到的问题都记录一下,以后有时间的话也能回头看看

1、background-size

IE8是不支持CSS3属性background-size的,因此在使用该属性设置背景图大小时,在IE8下会使背景图大小显示不正常

解决方法有2,

该问题的参考地址:https://www.zhihu.com/question/32285092?sort=created     https://github.com/louisremi/background-size-polyfill

方法一.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( 
src='images/logo.gif', 
sizingMethod='scale'); 
  
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( 
src='images/logo.gif', 
sizingMethod='scale')"; 
  
// 该方法存在以下问题: 
// 1.不能指定任意大小background百分比,可用cover 
// 2.用于单张图片不能使用图片精灵等拼图。 
// 3.图片地址要使用绝对地址形式 
// 4.兼容IE7、8 

方法二

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); } 
  
// 该方法需注意的问题: 
// 1.可指定百分比 
// 2. .htc要相对文档路径 
// 3.兼容IE7、8 

在实际解决问题时,使用的第二种方法。并且设置backgound-size:50% 50%\9

2、gradient 

IE8不支持渐变属性gradient ,像这样  

background-image: -ms-gradient(linear, left top, left bottom, from(#0f59b1), color-stop(0.5, #155eb1), to(#124da1));  

这样的写法在IE8下背景图不能正常显示。

解决方法如下:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');  
// 且该属性必须写在最后 ,startColorStr :起始颜色  ,endColorStr:结束颜色,gradientType为0表示垂直渐变,为1表示水平渐变。

3、preventDefault()

preventDefault():阻止浏览器的默认行为,如点击a标签跳转新页面 等等 ,但在IE下是不支持该方法的,需要使用window.event.returnValue = false来实现。

完整代码如下

if(event.preventDefault){ 
    event.preventDefault(); 
}else{ 
    window.event.returnValue=false; 
} 

4、js报错:缺少标识符、字符串或数字

原因是在IE下,json最后一项的末尾不允许有逗号,其他浏览器则可有可无

var data={ 
    name:"test", 
    age:23, 
    school:"beijingdaxue", // 末尾的逗号,在IE下会报错 
} 

5、属性”$“的值为null、未定义或不是Function对象

原因是找不到指定的jquery文件 

6、indexOf() 问题

var arr=['aaa','bbb','cccc']; 
if(arr.indexOf('aaa')>-1){ 
    console.log('-----包含aaa') 
} 

在IE8下数组不支持indexOf()方法,解决的办法有二,

1、使用jQuery中的方法$.inArray()替代之,当然可要首先引入jQuery.js

<script src="jquery.xxx.js"> 
var arr=['aaa','bbb','ccccc','dde']; 
if($.inArray('aaa',arr)>-1){ 
    console.log() 
} 

2、在使用indexOf()之前先判断以下是否有indexOf()  (在网上找的)

//添加数组IndexOf方法 
if (!Array.prototype.indexOf){ 
  Array.prototype.indexOf = function(elt /*, from*/){ 
    var len = this.length >>> 0; 
  
    var from = Number(arguments[1]) || 0; 
    from = (from < 0) 
         ? Math.ceil(from) 
         : Math.floor(from); 
    if (from < 0) 
      from += len; 
  
    for (; from < len; from++){ 
      if (from in this && this[from] === elt) 
        return from; 
    } 
    return -1; 
  }; 
}  

 原文链接:http://blog.leanote.com/post/jiang/IE8%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98


Cookie

欢迎留言