来源:零一
作者:前端印象

大家好,IE 大家都不陌生,毕竟出现在大家的视野中已经很久很久,久到有20多年,当然也因前端技术的快速更新,给需要兼容IE浏览器的前端程序员带来了不少的困扰。

慢慢地,大家都在尝试抛弃IE,比如Vue3考虑彻底放弃对IE的支持,甚至连微软自己都决定在2021年8月17日起逐渐放弃支持IE

时间久了,对 IE 多少有点感情了,跟大家一起回顾一下跟 IE 的抗争史吧!

利用高渲染模式

因为 IE 不兼容的东西太多了,很多人都选择使用相对比较高级的渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
// or
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

上面一个是使用Edge渲染模式来解析代码;下面这个则是使用Chrome内核,但你用Chrome内核也得用户安装了才行啊,很多电脑仅有一个IE,你根本拿它没办法。

害!治标不治本的办法

我是Mac,哪来的IE?

直接好家伙!很多程序员的电脑都是Mac,你让我如何从macOS系统里给你找IE浏览器出来啊?要不....再配一台Windows电脑?拉倒吧!

幸亏很多国产浏览器都提供了IE内核,也就是说你可以切换至IE内核,强行模拟IE浏览器进行调试,但这始终只是模仿呀,又不是真实环境

那只能安装一个非常占空间的虚拟机,借助它提供的Windows环境来调试IE浏览器了。

总之就是头疼!

ECMAScript 新语法我一个用不了

大家用的最多的就是ES5的语法了吧,或者说在大多数人的概念里,ES5应该是很低级的语法了,然而不争气的 IE 连对ES5的兼容性也不是那么完美

那么能怎么办呢?总不能说为了兼容IE,放弃使用很多方便的新语法吧~ 其实不止IE对ECMAScript新语法兼容性不好,这个支持程度都要看浏览器厂商的态度和效率的。所以我们也不得不为了兼容大部分浏览器而做各种"退化"操作,比如出了ES6的语法,而我们却用ES5的语法去实现一遍ES6的语法(偷偷问一句,很多面试题是不是就这么来的?

总之这么做不是个办法,所以也孕育出了JQuery,它最大的好处就是帮我们简化了代码做足了浏览器兼容,比如正常情况下元素的事件绑定和移除我们分别用的都是 addEventListenerremoveEventListener,而IE呢,分别是 attachEventdetachEvent。还有Ajax请求的写法,IE也有它单独的方法,正常的Ajax构造函数是XMLHttpRequest,而IE则是 ActiveXObject

还好这些兼容JQuery都帮我们做了,那个时代,谁不夸一句JQuery好呢?真的难以想象,要是没有站在巨人的肩膀上,开发得多累啊!

再bb一句,即使有了JQuery,IE还是有好多要兼容的地方,要吐了

CSS的使用总是差强人意

CSS3能让我们用简洁的语法完成花里胡哨的样式,而IE不允许。

现在最最最常用的Flex布局,IE9及以下都不支持,及时IE10、IE11兼容程度也不是很理想。

那么怎么办?

当然是回归原始了,定位浮动梭哈!当然也可以用table布局咯~


IE浏览器的CSS兼容能有多BT?

<!--[if IE 6 ]>< link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]--><!--[if lte IE 8 ]> <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" />
<![endif]-->

条件注释是一种 IE 专有的、对常规(X)HTML 注释的 Miscrosoft 扩展。看代码也大致能猜到啥意思了,就是针对不同的IE浏览器版本,加载不同的样式文件,这这这...这也太麻烦了

路由支持程度不好

前后端不分离的时代过去以后,SPA的单页面应用成为了当前的主流,那么路由的管理也就非常重要。众所周知,路由一共有两种:HashHistory,前者没啥好说的,没啥兼容问题,但url会显得很丑;后者是HTML5新增的API,所以会有些兼容性问题,尤其是IE,但它解决了前者的缺点,所以更多人还是喜欢用后者。

咋整?我写个SPA应用并且用了History管理路由,放到IE9及以下的浏览器上就不管用了?

其实就连市面上很成熟的Router库都没有兼容IE9及以下的浏览器,像vue-router对于IE9及以下不支持html5 history新特性,如果在IE9及以下的版本则自动降级为Hash。

那么放在普通的项目中,我们该如何使用History路由呢?同样是站在巨人的肩膀上,借助一个叫 HTML5-History-API 的库即可,这个库就很明确告诉你是兼容IE9及以下的版本的。

IE退休了

IE终于要退出历史舞台了,2021年5月19日,微软公司正式宣布,历时26年后,IE浏览器将于2022年6月15日停用。也就是说IE将永远停留在IE11版本,微软也终于接受了现实。

他们是心甘情愿放弃IE的吗?当然不是,存活26年的IE之所以能火起来只不过是得益于最先抢占市场以及Windows的捆绑安装,而产品不用心维护迭代,最终还是被那些优秀的浏览器给打败了,放眼望去,在PC端的IE市场占有率仅有1%多一点,早已被其它浏览器甩在后头了。

图来自于Statcounter

近日,谷歌搜索也发推特说明他们将不再支持IE11,原因很简单,维护成本太大,这不就是我们开发时兼容IE的心声嘛!

一些思考

IE提前退出历史舞台,是因为它的不作为,与主流浏览器的不统一,独树一帜。程序员们的诉求是什么呢?希望市场上的浏览器能尽可能得统一,能按照同一套规范来实现功能,这样能促使浏览器语言的快速发展与展现,所有的注意力能放在业务、功能上,而不是兼容这个兼容那个!

好了,最后我再皮一下,下一个遭殃的浏览器是谁呢?评论区留下你的吐槽~

往期推荐

Facebook 遭遇史诗级故障!

数学在左,人生在右

Redis很厉害,使用规范来啦

携手开发者,一起精准打造数智未来!

点分享

点收藏

点点赞

点在看

那些与 IE 相伴的日子相关推荐

  1. linux脚本重定向到输入,linux shell输入输出重定向

    新建一个文本文件包含所需要的脚本.举例,我会使用pico编辑器写一个脚本用来运行程序tar,带上必要的可选项可以用来解压从因特网下载下来的*.tar的文件(我好像总是记不住tar的所有参赛).我决定把 ...

  2. 我爱的人,你知道我一直在

    一定有许多人不同意,毕竟分隔两地,不能照顾依偎着对方,心里的失落总是有的罢.但是异地恋的人确实是幸福的,比任何人都幸福. 两个人能整天腻在一起,固然很幸福,他们很少会寂寞,但是也很少有绵长的思念.思念 ...

  3. 南下事业篇——深圳 深圳(回顾)

    2019独角兽企业重金招聘Python工程师标准>>> 二0一二年三月二十三号记录了下面的一篇日志,现在回味一下觉得自己有点惭愧,但不后悔,知道的越多就越了解自己的无知,工作之后渐渐 ...

  4. CPU 可以跑多快?地球到火星的距离告诉你!

    来源:码农的荒岛求生 作者:码农的荒岛求生 这张出自Google大神 Jeff Dean的图,展示系统中各种关键操作的时延具体有多少. 需要注意的是这张图上的数据自2012年后就没有再更新过了,统计自 ...

  5. 低代码会让程序员更加内卷吗?

    作者| Mr.K   编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 今天的主题呢主要是来源于最近的一个很火的话题--『低代码』. 低代码会不会让程序员更加内卷? 要回答这 ...

  6. oracle 自治事物,自治事务 - 努力创造未来! - BlogJava

    自治事务前的事务管理(一般事务管理) 像 DML 这样的数据库扣作都是在事务的上下文环境中执行的.事务是一个或多个 SQL 语句的序列,执行一定的工作逻辑单元.事务.定义的特定会话可以由 commit ...

  7. java quartz实例_一个非常简单的quartz例子

    在quartz中一个作业实例必须实现org.quartz.Job接口 如: package com.unicom.gdnum.jobs; import java.util.*; import org. ...

  8. 用计算机术语写毕业寄语,毕业寄语唯美句子(精选55句)

    毕业寄语唯美句子(精选55句) 在我们平凡的日常里,大家总少不了要接触或使用寄语吧,寄语的文体没有严格限制,可以是诗歌.散文或者随笔.你会写寄语吗?下面是小编精心整理的毕业寄语唯美句子(精选55句), ...

  9. 伴着代码,那个女孩儿慢慢长大

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 伴着代码 ...

最新文章

  1. V4L2获取usb视频流测试代码
  2. 允许用户在web Interface上修改密码
  3. Codeforces Round #730 (Div. 2) D2. RPD and Rap Sheet (Hard Version) 交互 + k进制的转换
  4. 洛谷 P1767 家族_NOI导刊2010普及(10)
  5. 红黑树为什么可以确保没有一条路径会比其他路径长出两倍
  6. android四周阴影效果_帮助独立开发者轻松创建令人惊叹的产品视觉效果
  7. linux装redis环境变量,linux 怎样安装redis
  8. RRT算法及其部分改进算法介绍
  9. 六年级计算机课件,六年级信息技术上册课件.ppt
  10. 聊天室应用开发实践(二):实现基于 Web 的聊天室
  11. 计算机数学基础 周密,一位计算机牛人的心得,谈计算机和数学.doc
  12. STM32内部参考电压的使用
  13. AnyDesk(远程控制软件) 免费版,比Teamviewer好用
  14. Unable to load shared library ‘libgdiplus‘ or one of its dependencies
  15. DDR4、GDDR5、GDDR6内存的区别
  16. 游戏测试——whistle抓包工具的使用
  17. ClickHouse介绍安装和工作原理(1)
  18. 扩增子测序 查找引物是否去除
  19. iOS 开发资源汇总 肯定有你想要的资源(Continuously updated)
  20. APP在后台被系统杀死的六种主要原因

热门文章

  1. php 字符串函数 教程_PHP 字符串获取 substr 与 strstr 函数
  2. 汤姆克兰西全境封锁服务器维护时间,汤姆克兰西全境封锁无法登录怎么解决 无法登录解决方法攻略...
  3. cc9.3 indesign_InDesign2018mac中文版_Adobe InDesign CC 2018 for mac官方版 - 17软件下载
  4. net framework 3.5 安装错误_PageAdmin CMS建站系统报http403错误的解决方案
  5. c语言excel转pdf,基于C语言和Excel软件下光速测量仪测量玻璃折射率.pdf
  6. linux配置nginx命令行,Linux - 加上sudo后,nginx找不到命令
  7. 微信公众号php提交表单,PHP教程:使用YII2框架实现微信公众号中表单提交功能...
  8. vs工程 更换opencv版本_Windows下opencv源代码转化和编译
  9. java 邮件跟踪_如何跟踪邮件已读状态(Java)
  10. python中locals函数_Python神奇的内置函数locals的实例讲解