低版本IE兼容彙總

根據本身的開發過程總結了一些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. IE七、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.IE六、7右浮動換行問題

問題描述：
IE六、7下，若浮動元素以前存在兄弟行內非浮動元素，
IE 會將浮動元素所在的「當前行」認爲是其前邊的兄弟行內元素
所產生的匿名框的底邊，致使該浮動元素折行。

解決辦法：
一、使用css hack，*margin: -28px;爲元素添加負的margin，調整位置
二、將右浮動元素放在全部兄弟行內非浮動元素的前面
三、將全部兄弟行內非浮動元素添加浮動

8.IE六、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()方法加載失敗，檢查代碼，更正錯誤便可解決。