最近的項目涉及ie11的兼容，簡直是各種奇葩問題撲面而來。為了加強記憶或者給其他小伙伴福利，趕緊匯總記錄了下來：

1.樣式問題：部分屬性iE不兼容，例：
? a.? ? white-space: nowrap ：nowrap 不生效
? 解決方法：添加一行樣式：
word-break: keep-all

? b.? ? inherit 屬性不生效、避免在ie中使用該屬性

2.原生js部分屬性不兼容，例:
includes()方法報錯
解決方法：用indexOf()方法替代

?

el.indexOf()>=0? <==>? el.indexOf 返回true

3.冒泡事件，ie默認接受冒泡事件
????? ?解決方法：阻止事件向父元素冒泡
? ????//如果提供了事件對象，則這是一個非IE瀏覽器?
? ????if ( e && e.stopPropagation )?
? ????//因此它支持W3C的stopPropagation()方法?
? ????e.stopPropagation();?
? ????//否則，我們需要使用IE的方式來取消事件冒泡?

?

?

? ????else window.event.cancelBubble = true;?

?

4.formData.set()方法不支持，其實ie只支持formData.append()方法

? ? 解決方法：暫時沒有摸索出更好的方法，只是盡量第一次塞進去的值是干凈可用的。

5.ie下input框設置了readonly屬性，鼠標還是可以點擊光標聚焦

? ? 解決方法：放棄readonly屬性，采用disabled屬性方法。

<input type="text" name="email" disabled="disabled">

6.ie下input框的change事件不能用enter鍵觸發

? ?解決方法：用鍵盤捕捉事件，判斷鍵值是否等于‘13’（enter），滿足條件再調用change事件

? ?代碼：

? ?//是否為ie瀏覽器

? ?getIsIE() {

? ? ? ? if (!!window["ActiveXObject"] || "ActiveXObject" in window)?return true;

? ? ? ?else?return false;

? ?}

? // 獲取回車鍵事件 -- 兼容ie

? getEnterEvent(e) {

? ? ?//判斷是否是ie瀏覽器

? ? ?if(getIsIE()) {

? ? ? if(e.keyCode == 13){

? ? ? ? ? //注意判斷值沒有發生變化時不做修改

? ? ?}

}

?

?

?

總結

以上是生活随笔為你收集整理的ie11兼容问题汇总及解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。