这些天在改数据平台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
文章评论