导语
浏览器兼容问题是前端人员经常遇到和必须解决的问题，其中最独树一帜的就是IE浏览器了，没错，兼容IE绝对是每个前端人员最头痛的事情。关于一些常规样式的兼容就不啰嗦了，网上已经有很多通用的样式设置，如:reset.css。这里给大家分享一下我在最近的项目开发中关于IE浏览器踩得一些坑。
1.IE11中输入框无法输入-间歇性精神智障
首先这个问题出现的场景是你的html是嵌入在一个IFrame中，通过选项卡切换IFrame的src的过程中html中的输入框有时候无法输入，这个问题在不同的机子上出现的概率还不一样，有的百分之三十，有的百分之五十，真的可以说是间歇性精神智障。
这个智障问题有时候可以通过一些小动作让它恢复正常，比如在iframe中右键刷新一下，或者按'TAB'键将焦点切换到任何一个文本框，这时，所有的文本框都可以用点击正常获得焦点了，真的是非常变态。但是这里我要为我们的测试小伙伴点个赞，能分析到这个程度你真的是很敬业[闲啊]，还是非常感谢你给了我解决思路。
经过一番努力，我发现，手动调用一下任何一个（通常是第一个）文本框的focus()方法就可以让所有的文本框恢复神智了。于是写了一个公共脚本，在页面加载完成后，获取第一个文本框并让其focus()和blur()，经测百来次，再没碰见无法获取焦点的情况，问题解决。
贴代码
$(function(){
//解决IE11文本框无法输入
$("input[type='text']").eq(0).focus();
$("input[type='text']").eq(0).blur();
})
2.ie10、11页面刷新，文本框不恢复默认值-强刷啊，解决
页面有一个文本框，我在里面写了点文字，当我刷新浏览器的时候，这个文本框不清空，还是原来的文字，但是我如果通过切换iframe的src打开页面，此时文本框是空的。
本来想用cookie做，但是发现只有在浏览器关闭了以后才会清除cookie，所以最直接的方法想着等页面加载完成后手动清空，但是很抱歉，刷新之后竟然还在！！！这里必须要加个计时器，至于原因我还没有想到，只是觉得很变态。
贴代码
$(function(){
setTimeout(function(){
$("input[type='text']").val('');
}, 30);
})
3.<el-autocomplete> 组件在IE11不支持搜狗中文输入-表示很无奈
在vue项目中，比较受欢迎的UI框架应该非elememt-ui莫属了，经过了一番调研，还是决定使用它了，但是却被<el-autocomplete> 这个组件坑惨了，竟然在IE11中不让用搜狗输入法输入中文，注意英文可以，或者其他的输入法也是可以输入中文的，这里我对我们的测试小伙伴已经达到了膜拜的程度。
我找到饿了么团队的论坛，发现果然有这个bug
看到这里我的内心是崩溃的，无奈只能将编译模式改为IE10。这里提醒大家使用组件之前一定要调研好！！！
贴代码
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE10" >
4.在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛
解决方案
::-ms-clear,::-ms-reveal{display:none;}
注:IE9-不识别
总结
关于IE的坑，只有你想不到的，如果你们在项目开发中也遇到了些神坑，欢迎评论吐槽。最后，我想静静。
网友评论