那些与 IE 相伴的日子

ae522c93c0b93ef720802516c7aa69bf.gif

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

大家好,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浏览器进行调试,但这始终只是模仿呀,又不是真实环境

ae9245dbf62e64c6502d21b931986663.png

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

总之就是头疼!

ECMAScript 新语法我一个用不了

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

624a8b0508daea82c0e73c54ee3b5497.png

那么能怎么办呢?总不能说为了兼容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兼容程度也不是很理想。

afb030f44c9220e9623a5fe3834ea8dd.png

那么怎么办?

当然是回归原始了,定位浮动梭哈!当然也可以用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,但它解决了前者的缺点,所以更多人还是喜欢用后者。

c496bfbd2450400981d93c7d1874b354.png

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

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

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

4dd93b107d2237ab69de48d4d1f7abe8.png

IE退休了

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

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

98d635bb5aa521e5403635201c565d7f.png

图来自于Statcounter

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

一些思考

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

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

c86037f73efe567cfcb1f6ce2847ee33.gif

59d7cedeffcf14878515c8482c4e9db3.png

往期推荐

Facebook 遭遇史诗级故障!

数学在左,人生在右

Redis很厉害,使用规范来啦

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

3c64da09a7c3fff85d8222e8a3a71023.gif

点分享

557b14304e0be2e5cb92532c8ebefb50.gif

点收藏

c8efd4e995ff9944fc8f3351ea5bedc6.gif

点点赞

dae6463275160fa627d4e9bce8397620.gif

点在看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/513818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html代码style图片width,HTML Style columnWidth用法及代码示例

DOM中的columnWidth属性用于指定列的宽度。用法:返回columnWidth属性&#xff1a;object.style.columnWidth设置columnWidth属性&#xff1a;object.style.columnWidth "auto | length | initial | inherit"属性值&#xff1a;auto:缺省值。列宽将由浏览器确定lengt…

KubeVela 1.0 :开启可编程式应用平台的未来

简介&#xff1a; 如果你对云原生领域不太关注&#xff0c;可能对 KubeVela 还没有做过太深入的了解。别着急&#xff0c;本文就借着 v1.0 发布之际&#xff0c;为你详细的梳理一次 KubeVela 项目的发展脉络&#xff0c;解读它的核心思想和愿景&#xff0c;领悟这个正冉冉升起的…

android-x86 镜像iso下载_2019年微软MSDN原版镜像系统下载地址 Win10/7原版系统iso镜像文件...

如今&#xff0c;不少用户开始讨厌以GHOST形式来安装操作系统&#xff0c;虽然步骤十分简单&#xff0c;但是从网上下载的GHOST系统&#xff0c;已经形成了一个黑色产业链&#xff0c;为了盈利&#xff0c;捆绑了软件全家桶、恶意强制主页&#xff0c;甚至捆绑木马&#xff0c;…

大流量场景下如何云淡风轻地进行线上发布?

简介&#xff1a; 本文介绍了微服务治理下金丝雀发布的能力&#xff0c;解决了发布期间少量流量验证新功能的问题。 前言 本文&#xff0c;我们继续聊聊《揭秘大流量场景下发布如丝般顺滑背后的原因》中的另外一环&#xff0c;灰度发布&#xff0c;也叫金丝雀发布。 ​ 很多互…

匿名提问:rm -rf了怎么办?

整理 | 易璜珵出品 | 《新程序员》IT界流传着一个神秘的代码&#xff0c;老程序员听了总是意味深长地一笑&#xff0c;而新手程序员则总是手痒地想试试&#xff0c;那就是删库指令rm -rf。这一行代码下去&#xff0c;海量数据可能就荡然无存。近几年发生的“删库跑路”事件让这…

ubuntu matlab_有没有人和我一起整理Python的matlab代替

想找人一起整理Python中matlab代替的包&#xff0c;最好是能够将常用功能用tkinter封装起来&#xff0c;积少成多&#xff0c;逐步逼近完整。比如将scipy中的最小二乘法拟合功能&#xff0c;找个图形界面封装一下&#xff0c;就变成了曲线拟合工具&#xff0c;可以代替matlab的…

逸仙电商Seata企业级落地实践

简介&#xff1a; 本文将会以逸仙电商的业务作为背景&#xff0c; 先介绍一下seata的原理&#xff0c; 并给大家进行线上演示&#xff0c; 由浅入深去介绍这款中间件&#xff0c; 以便读者更加容易去理解 Seata 这个中间件。 作者 | 张嘉伟&#xff08;GitHub ID&#xff1a;l…

“类云”的存储服务什么样?Pure Storage发布Pure Fusion等系列新品

一键部署自动化存储平台与云原生数据库即服务&#xff0c;无缝连接基础设施运营与应用程序。 编辑 | 宋慧 出品 | CSDN 云计算 近日&#xff0c;专为多云环境提供存储即服务的Pure Storage发布一系列现代化基础设施、运营及应用程序&#xff0c;这是Pure Storage迈向创新现代…

mac mongodb可视化工具_MongoDB从立地到成佛(介绍、安装、增删改查)

文章作者公众号bigsai&#xff0c;已收录在回车课堂,如有帮助还请不吝啬点个赞赞支持一下&#xff01;课程导学大家好我是bigsai&#xff0c;我们都学过数据库&#xff0c;但你可能更熟悉关系(型)数据库例如MySQL&#xff0c;SQL SERVER&#xff0c;ORACLE等&#xff0c;对于非…

阿里巴巴云原生 etcd 服务集群管控优化实践

简介&#xff1a; 这些年&#xff0c;阿里云原生 etcd 服务发生了翻天覆地的变化&#xff0c;这篇文章主要分享一下 etcd 服务在面对业务量大规模增长下遇到的问题以及我们是如何解决的&#xff0c;希望对读者了解 etcd 的使用和管控运维提供经验分享。 作者 | 陈星宇&#xff…

计算机组装与维护思考问题,计算机组装与维护中的常见问题及解决方法

郜庆国摘要&#xff1a;在如今的社会下&#xff0c;各个领域的很多行业在工作的时候都需要用到计算机来帮助工作的进行&#xff0c;因为计算机在很多情况下都能够很好地进行计算与帮助&#xff0c;所以我们在进行工作时&#xff0c;不仅提高了工作的效率&#xff0c;还解决了很…

淘票票首次公开小程序开发秘籍,踩过坑才知道怎么走!

简介&#xff1a; 在2019年&#xff0c;阿里巴巴文娱的淘票票几乎涉足了当时市面上所有的小程序。在不少平台上&#xff0c;淘票票是阿里“第一批吃螃蟹”的技术团队。回顾过往&#xff0c;阿里文娱做过很多尝试&#xff0c;也踩过很多坑。《小程序 大世界》总结了淘票票过去 2…

stm32f407 6个串口dma_stm32之DMA

一. 对于大容量的STM32芯片有2个DMA控制器&#xff0c;控制器1有7个通道&#xff0c;控制器2有5个通道每个通道都可以配置一些外设的地址。二. 通道的配置过程&#xff1a;1. 首先设置CPARx寄存器和CMARx寄存器。通过DMA控制器把一个地址的值复制到另外一个地址&#xff0c;通过…

立足当下,塑造未来

今天&#xff0c;以“5G与世界同行”为主题的2021全球移动宽带论坛&#xff08;Global MBB Forum&#xff09;在迪拜举行。期间&#xff0c;华为轮值董事长胡厚崑发表了题为“立足当下&#xff0c;塑造未来”的主题演讲。胡厚崑指出&#xff1a;“5G预商用五年以来&#xff0c;…

jfinal html5,Jfinal框架整合webSocket技术功能实现

技术难度&#xff1a;简单在这里我会用最简单的方法实现JFinal框架结合webSocket最基础的功能&#xff0c;以至于后续业务的拓展需要小伙伴们依据实际情况去实现相应的开发&#xff01;废话不多说&#xff0c;直接上代码&#xff01;1、编写webSocket类package morality.ws;imp…

行业实战 | 5G+边缘计算+“自由视角” 让体育赛事更畅快

简介&#xff1a; 世界本是多维的。进入5G时代&#xff0c;观众对多维度视觉体验的需求日益增长&#xff0c;5G MEC网络与边缘计算的结合&#xff0c;具备大带宽、低延迟特性&#xff0c;使视频多维视觉呈现成为现实。在第二十三届CUBA中国大学生篮球联赛期间&#xff0c;中国电…

华为汪涛:走向智能世界2030,无线网络未来十年十大产业趋势

2021全球移动宽带论坛&#xff08;Global MBB Forum&#xff09;期间&#xff0c;华为常务董事、ICT基础设施业务管理委员会主任汪涛发表了题为“走向智能世界2030&#xff0c;无线网络未来十年十大趋势”的主题演讲。汪涛表示&#xff1a;“未来十年&#xff0c;是走向智能世界…

python怎么输入一个数字并调用_Python3 实例(一)

原标题&#xff1a;Python3 实例&#xff08;一&#xff09; Python Hello World 实例 以下实例为学习Python的第一个实例&#xff0c;即如何输出"Hello World!"&#xff1a; 实例 # -*- coding: UTF-8 -*- # Filename : helloworld.py # author by : www.runoob.com…

未来教育计算机书,未来教育.全国计算机等级考试

1册图书1张光盘&#xff0c;轻松应对2018年一级计算机基础及MS Office应用考试 n 1.历年真题精选&#xff0c;全方位把握真考动向&#xff0c;具有练习价值 n (1)新大纲、新题型、新题库&#xff0c;全方位解读无纸化考试&#xff0c;帮助考生轻松过关。 n (2)精选2017年~2016年…

python制作简单网页_python 跑服务器,访问自己制作的简单页面

1 python 跑服务器&#xff0c;访问自己制作的简单页面2 # winb出现一个网址http:/0.0.1:5000/复制到浏览器查看 # http://127.0.0.1:5000/home做这个首先要安装好python的flask&#xff0c;前面有详细的安装步骤 具体代码如下# coding:utf-8 # Flask构造函数&#xff0c;从fla…