導(dǎo)語

瀏覽器兼容問題是前端人員經(jīng)常遇到和必須解決的問題，其中最獨(dú)樹一幟的就是IE瀏覽器了，沒錯，兼容IE絕對是每個前端人員最頭痛的事情。關(guān)于一些常規(guī)樣式的兼容就不啰嗦了，網(wǎng)上已經(jīng)有很多通用的樣式設(shè)置，如:reset.css。這里給大家分享一下我在最近的項(xiàng)目開發(fā)中關(guān)于IE瀏覽器踩得一些坑。

1.IE11中輸入框無法輸入-間歇性精神智障

首先這個問題出現(xiàn)的場景是你的html是嵌入在一個IFrame中，通過選項(xiàng)卡切換IFrame的src的過程中html中的輸入框有時(shí)候無法輸入，這個問題在不同的機(jī)子上出現(xiàn)的概率還不一樣，有的百分之三十，有的百分之五十，真的可以說是間歇性精神智障。

這個智障問題有時(shí)候可以通過一些小動作讓它恢復(fù)正常，比如在iframe中右鍵刷新一下，或者按'TAB'鍵將焦點(diǎn)切換到任何一個文本框，這時(shí)，所有的文本框都可以用點(diǎn)擊正常獲得焦點(diǎn)了，真的是非常變態(tài)。但是這里我要為我們的測試小伙伴點(diǎn)個贊，能分析到這個程度你真的是很敬業(yè)[閑啊]，還是非常感謝你給了我解決思路。

經(jīng)過一番努力，我發(fā)現(xiàn)，手動調(diào)用一下任何一個（通常是第一個）文本框的focus()方法就可以讓所有的文本框恢復(fù)神智了。于是寫了一個公共腳本，在頁面加載完成后，獲取第一個文本框并讓其focus()和blur()，經(jīng)測百來次，再沒碰見無法獲取焦點(diǎn)的情況，問題解決。

貼代碼

$(function(){
     //解決IE11文本框無法輸入
     $("input[type='text']").eq(0).focus();
     $("input[type='text']").eq(0).blur();
 })

2.ie10、11頁面刷新，文本框不恢復(fù)默認(rèn)值-強(qiáng)刷啊，解決

頁面有一個文本框，我在里面寫了點(diǎn)文字，當(dāng)我刷新瀏覽器的時(shí)候，這個文本框不清空，還是原來的文字，但是我如果通過切換iframe的src打開頁面，此時(shí)文本框是空的。

本來想用cookie做，但是發(fā)現(xiàn)只有在瀏覽器關(guān)閉了以后才會清除cookie，所以最直接的方法想著等頁面加載完成后手動清空，但是很抱歉，刷新之后竟然還在?。?！這里必須要加個計(jì)時(shí)器，至于原因我還沒有想到，只是覺得很變態(tài)。

貼代碼

$(function(){
    setTimeout(function(){
         $("input[type='text']").val('');
    }, 30);
 })

3.<el-autocomplete> 組件在IE11不支持搜狗中文輸入-表示很無奈

在vue項(xiàng)目中，比較受歡迎的UI框架應(yīng)該非elememt-ui莫屬了，經(jīng)過了一番調(diào)研，還是決定使用它了，但是卻被<el-autocomplete> 這個組件坑慘了，竟然在IE11中不讓用搜狗輸入法輸入中文，注意英文可以，或者其他的輸入法也是可以輸入中文的，這里我對我們的測試小伙伴已經(jīng)達(dá)到了膜拜的程度。

我找到餓了么團(tuán)隊(duì)的論壇，發(fā)現(xiàn)果然有這個bug

看到這里我的內(nèi)心是崩潰的，無奈只能將編譯模式改為IE10。這里提醒大家使用組件之前一定要調(diào)研好?。?！

貼代碼

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE10" > 

4.在IE瀏覽器下 input type="text"文本框點(diǎn)擊時(shí)后面會出現(xiàn)"X",以及type="password"后面會出現(xiàn)眼睛

解決方案

::-ms-clear,::-ms-reveal{display:none;}

注:IE9-不識別

總結(jié)

關(guān)于IE的坑，只有你想不到的，如果你們在項(xiàng)目開發(fā)中也遇到了些神坑，歡迎評論吐槽。最后，我想靜靜。