低版本IE兼容汇总

1. JSON未定义

问题描述：
IE8以下浏览器未定义JSON对象，无法使用JSON.parse()和JSON.stringify()方法

解决方法：
通过IE的if条件判断在IE8及以下浏览器导入json2.js即可

扩展：IE的if条件判断

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()方法加载失败，检查代码，更正错误即可解决。

来自：https://segmentfault.com/a/1190000018471972

链接: https://fly63.com/article/detial/2328