低版本IE兼容汇总

4次阅读

共计 2812 个字符,预计需要花费 8 分钟才能阅读完成。

根据自己的开发过程总结了一些 IE 的兼容问题
1. JSON 未定义
问题描述:IE8 以下浏览器未定义 JSON 对象,无法使用 JSON.parse() 和 JSON.stringify() 方法
解决方法:通过 IE 的 if 条件判断在 IE8 及以下浏览器导入 json2.js 即可
扩展:IE 的 if 条件判断 <!–[if IE 5]> 仅 IE5.0 与 IE5.5 可以识别 <![endif]–> <!–[if gt IE 5.0]> IE5.0 以及 IE5.0 以上版本都可以识别 <![endif]–> <!–[if IE 6]> 仅 IE6 可识别 <![endif]–> <!–[if lt IE 6]> IE6 以及 IE6 以下版本可识别 <![endif]–> <!–[if gte IE 6]> IE6 以及 IE6 以上版本可识别 <![endif]–> <!–[if IE 7]> 仅 IE7 可识别 <![endif]–> <!–[if lt IE 7]> IE7 以及 IE7 以下版本可识别 <![endif]–> <!–[if gte IE 7]> IE7 以及 IE7 以上版本可识别 <![endif]–>
2. IE8 下 jquery 报错:意外地调用了方法或属性访问
问题描述:IE8 下 jquery 报错:意外地调用了方法或属性访问解决方法:更改页面 title 不可以使用:$(“title”).html(“hello”);
而应该使用:document.title=”hello”;
3. IE10 以下不支持 placeholder 属性
问题描述:placeholder 属性是 H5 新增的 input 属性,IE10 以下浏览器均不支持
解决方法:首先判断当前浏览器版本是否支持 placeholder 属性,若不支持则通过为 input 添加 focus 和 blur 事件,获得焦点时:获取当前元素的 placeholder 属性值,并将属性值设置为 input 的 value 失去焦点时:判断当前 input 的 value 是否等于空(”), 若为空则将属性值设置为 input 的 value 提交时:判断当前 input 的 value 是否等于 placeholder 属性值,若相等则将 value 等于空

// 判断 input 是否支持 placeholder 属性
var input = document.createElement(‘input’);
if(“placeholder” in input){
alert(‘ 支持 ’);
}else{
alert(‘ 不支持 ’);
}
//jquery 解决方法
jQuery(‘[placeholder]’).focus(function() {
var input = jQuery(this);
if (input.val() == input.attr(‘placeholder’)) {
input.val(”);
input.removeClass(‘placeholder’);
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == ” || input.val() == input.attr(‘placeholder’)) {
input.addClass(‘placeholder’);
input.val(input.attr(‘placeholder’));
}
}).blur().parents(‘form’).submit(function() {
jQuery(this).find(‘[placeholder]’).each(function() {
var input = jQuery(this);
if (input.val() == input.attr(‘placeholder’)) {
input.val(”);
}
})
});
4. IE7、8 parseInt 处理 0 开头字符串异常问题
问题描述:ie8 和 ie7 使用的是 ECMAScript3,将’0086’,’0060’按照八进制进行了处理,所以会出现’0060’变成了 48,而八进制中是不会出现数字 8 的,所以 parseInt(‘0086’) 就返回了 0;
解决方法:parseInt() 函数可解析一个字符串,并返回一个整数。语法 parseInt(string, radix) 返回值,返回解析后的数字。说明 当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。举例,如果 string 以“0x”开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。参数 描述 string 必需。要被解析的字符串。radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以“0x”或“0X”开头,将以 16 为基数。如果该参数小于 2 或者大于 36,parseInt() 将返回 NaN。
5. IE 报错缺少标识符、字符串或数字
问题描述:其他浏览器均没有问题,新版本的 IE 也没有问题,低版本的 IE 会报这个错误,由于对象的末尾添加了逗号导致的。
解决方法:去掉对象中最后一个键值对后的逗号
6. 使 IE7 兼容透明度
问题描述:IE7 不兼容 opacity 属性
解决办法:
.opacity{
opacity: 0.5; /* 通用 */
filter: alpha(opacity=0); /*IE*/
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity:0.5; /* Safari */
}
7.IE6、7 右浮动换行问题
问题描述:IE6、7 下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边,导致该浮动元素折行。
解决办法:1、使用 css hack,*margin: -28px; 为元素添加负的 margin,调整位置 2、将右浮动元素放在所有兄弟行内非浮动元素的前面 3、将所有兄弟行内非浮动元素添加浮动
8.IE6、7 文字被折行
问题描述:<ul><li>…</li> <li>…</li> <li>…</li></ul> li {float:left; margin-right:10px; line-height:20px;} 不定宽的浮动时会出现如下文字折行
解决办法:强制文本不换行显示 white-space:nowrap
9. 使用 jQuery 的 load() 方法加载代码块时,空白
问题描述:低版本的 IE 在使用 jQuery 的 load() 方法加载代码块时,加载失败页面空白,并且控制台未报错。
解决办法:低版本的 IE 对 HTML 格式要求严格,标签未闭合,标签书写错误,错误嵌套,缺少必须属性等都会导致 load() 方法加载失败,检查代码,更正错误即可解决。

正文完
 0