Osheep

时光不回头,当下最重要。

干货 | 关于IE,你绝对想不到的神坑!

导语

浏览器兼容问题是前端人员经常遇到和必须解决的问题,其中最独树一帜的就是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

《干货 | 关于IE,你绝对想不到的神坑!》

看到这里我的内心是崩溃的,无奈只能将编译模式改为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的坑,只有你想不到的,如果你们在项目开发中也遇到了些神坑,欢迎评论吐槽。最后,我想静静。

点赞