Internet-Explorer

2022年6月15日，微软正式进行反对Internet Explorer（简称IE）浏览器，这一天终于来了。 TL;TR日期事件1991-08-06Tim Berners-Lee公布世界第一个网站，World Wide Web正式诞生1993-01-23Mosaic浏览器公布，其外围开发者为Marc Andreessen和Eric Brina1994-10-13网景公司公布Mosaic Netscape浏览器，该公司创始人为James Clark与Marc Andreessen1995-05-16盖茨公布The Internet Tidal Wave备忘录，信心将倒退Internet作为微软最高优先级1995-08-09网景公司上市，互联网泡沫开始1995-08-16微软公布Internet Explorer浏览器1995-12-07盖茨在微软的Internet Strategy Day发表Internet Explorer将完全免费1995-12-04JavaScript公布，运行于Netscape Navigator 2.0试用版1997-08-06乔布斯发表苹果与微软达成和解，将IE浏览器作为Mac的默认浏览器1999-11-05微软输掉反垄断官司，IE浏览器研发陷入停滞2003-01-07苹果公布Safari浏览器2004-11-09Mozilla公布Firefox浏览器2008-09-02谷歌公布Chrome浏览器2015-04-29微软公布Edge浏览器2018-12-06微软发表将会把Edge浏览器内核切换至Chromium2022-06-15微软进行反对Internet Explorer浏览器前IE时代World Wide Web1991年8月6日，Tim Berners-Lee公布了世界第一个网站：http://info.cern.ch，World Wide Web正式诞生，人类进入互联网时代。 Berners-Lee所开发的世界第一个浏览器，名字很霸气：WorldWideWeb。 图片起源：The WorldWideWeb browser Mosiac1993年1月23日，Mosaic浏览器公布，其外围开发者为Marc Andreessen和Eric Brina。 图片起源：NCSA Mosaic™ Mosiac浏览器的界面看起来和当初的浏览器区别不是很大：地址栏、后退、后退、刷新、主页。 Mosiac浏览器最大的翻新是减少了img标签，反对在网页中内嵌图片，而之前的浏览器须要用独自的窗口查看图片。img是Marc的想法，他心愿让Web变得更加性感。 Mosaic是第一个真正受到普通用户欢送的浏览器，WWW不再专属于学者和极客。 Mosiac浏览器的全称是NCSA Mosiac，它的版权是属于钻研机构NCSA的。换句话说，Masiac并不属于Marc。纽约时报在1993年年底报道Mosiac时，甚至都没有提及Marc和Eric。 Marc抉择来到Masiac团队，去硅谷淘金，失去灵魂人物的Mosiac浏览器逐步败落。 Netscape1994年10月13日，网景公布Mosaic Netscape 0.9浏览器，同年12月份公布1.0版本。因为网景没有Mosaic商标，于是将浏览器更名为Netscape Navigator，公司名称也从Mosaic Communications Corporation改成了Netscape Communications Corporation。 图片起源：WinWorld 网景的创始人之一Marc Andreessen就是Mosaic浏览器的主导者，他心愿开发一个Mosaic killer，他还邀请了Eric Brina一起退出，亲手掩埋他们之前的作品。 网景的另一位创始人是James Clark，他是一个胜利的创业者，他的教训、人脉和财力对网景公司的倒退施展了十分要害的作用。 商人Jim和极客Marc的年龄差距比拟大，Marc在James背后像一个小孩： 图片起源：Netscape IPO 20-year anniversary: Read Fortune’s 2005 oral history of the birth of the web ...

项目中用到了一个第三方的ie ocx控件，而经常遇到客户和测试小伙伴反馈相关功能无法正常使用，也没有友好提示。考虑到这个问题，必须要有一个ie ocx控件的检查机制。 检查原理创建ActiveXObject对象去检查ocx控件 let newObj = new ActiveXObject(servername, typename[, location]) 参数问题看起来很简单的，但是用起来我懵逼了，应用程序对象名称servername这个参数怎么填呢？ 插件供应商只提供了控件安装包，示例程序，clsid <object id="NetVideo" classid="clsid:27E1A157-6A29-48AE-86C2-14591D90B4D4"></object>于是我想应该可以从clsid入手研究。 什么是clsidclass identifier（类标识符）也称为CLASSID或CLSID，是与某一个类对象相联系的唯一标记(UUID)。一个准备创建多个对象的类对象应将其CLSID注册到系统注册数据库的任务表中，以使客户能够定位并装载与该对象有关的可执行代码。以上摘自百度百科，可以看到clsid跟uuid是类似的原理，用来进行插件的唯一标识。 根据clsid怎么查到servername在MDN上搜索ActiveXObject词条，可以看到这么一句： 您可以在HKEY_CLASSES_ROOT注册注册表项中识别主机PC上的servername.typename的值。哦，可以看到是从注册表中去查的。于是我运行regedit打开注册表查看，虽然知道是在HKEY_CLASSES_ROOT目录下，但是这也太多了吧，怎么找得到？ 当然还是要靠搜索功能，于是我根据clsid的值27E1A157-6A29-48AE-86C2-14591D90B4D4进行查找 搜索时间有点长，但是最终还是查到了，位置如下： 计算机\HKEY_CLASSES_ROOT\SDS_CMSCtrl.SDS_CMSCtrlCtrl.1 于是我猜想，servername应该就是SDS_CMSCtrl.SDS_CMSCtrlCtrl.1。经测试，果不其然。检查代码如下： try { const ocx = new ActiveXObject('SDS_CMSCtrl.SDS_CMSCtrlCtrl.1') console.log(ocx)} catch (error) { this.$alert('您还未安装视频插件！', '提示')}这样一来，如果用户没有安装插件，马上能够得到提示，perfect！ 首发链接 扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！

简评： 浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。1. 前缀 CSS3 样式如果您正在使用任何类型的现代 CSS 片段，例如框尺寸（box-sizing）或背景剪辑（background-clip），请确保使用适当的前缀。 -moz- /* Firefox and other browsers using Mozilla's browser engine */-webkit- /* Safari, Chrome and browsers using the Webkit engine */-o- /* Opera */-ms- /* Internet Explorer (but not always) */2. 使用 reset您可以使用 normalize.css，下面是我用的，来自 Genesis Framework Style Sheet。 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,input,menu,nav,output,ruby,section,summary,time,mark,audio,video {border: 0;margin: 0;padding: 0;vertical-align: baseline;}3. 避免填充宽度当你添加宽度为一个元素的填充时，它会变得更大。宽度和填充将被加在一起。 要解决这个问题，可以添加这个： * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box; /* Firefox, other Gecko */box-sizing: border-box; }4. 清除 float如果没有清除，很容易出问题。感兴趣的可以看看 Chris Coyier 的这篇文章。 ...

Terraform是一个高度可扩展的IT基础架构自动化编排工具，主张基础设施即代码，可通过代码集中管理云资源和基础架构，这意味着用户能够在京东云上轻松使用简单模板语言来定义、预览和部署云基础架构，能够快速将环境部署到京东云或本地数据中心，实现多云管理和跨云迁移。京东云成为国内少数拥有Terraform Provider产品的云厂商之一。应用场景：基础设施即代码、快速部署多云环境、自动化管理降低成本。 官网链接：https://www.terraform.io/docs... Terraform 是 Hashicorp 公司一款开源的资源编排工具，代表了业界前沿的技术和标准。相对于其他云上资源管理方式，具有快速创建基础设施、高效部署多云环境和大幅降低管理成本三大功能特性。 Terraform 通过代码管理维护云资源，可保存基础设施资源的状态，快速创建和维护管理云主机、网络、负载均衡等云资源，并通过代码与其他人共享云资源的编排配置。 Terraform支持200多个基础设施提供商，适用于多云方案，可快速将用户的环境部署到京东云、其他云厂商或者本地的数据中心。开发者可同时管理不同云厂商的资源，也可快速方便地迁移到另外一个云厂商。Terraform通过代码批量按计划地管理资源，可编排、重复地自动化管理云资源，减少人为因素造成的不确定管理错误，同时能快速创建相同的开发、测试、预发和生成环境，降低开发者的管理成本。 本文通过简单demo做一个技术入门的演示，目的是帮助大家了解如何采用Terraform来自动化管理京东云上的资源。 Terraform安装Terraform 是一个 IT 基础架构自动化编排工具，它的口号是 “Write, Plan, and create Infrastructure as Code”, 其程序安装在客户的终端PC上，可以运行于多种操作系统平台。本文实例采用的是CentOS操作系统。登录到主机后先下载一下安装包 1[jdc@mysandbox ~]$ mkdir tf 2[jdc@mysandbox ~]$ cd tf 3[jdc@mysandbox tf]$ wget https://releases.hashicorp.com/terraform/0.11.13/terraform_0.11.13_linux_amd64.zip 4--2019-05-16 14:41:57-- https://releases.hashicorp.com/terraform/0.11.13/terraform_0.11.13_linux_amd64.zip 5Resolving releases.hashicorp.com (releases.hashicorp.com)... 151.101.109.183, 2a04:4e42:1a::439 6Connecting to releases.hashicorp.com (releases.hashicorp.com)|151.101.109.183|:443... connected. 7HTTP request sent, awaiting response... 200 OK 8Length: 21128942 (20M) [application/zip] 9Saving to: ‘terraform_0.11.13_linux_amd64.zip’1011100%[============================================================================================================================================================>] 21,128,942 4.30MB/s in 66s12132019-05-16 14:43:05 (312 KB/s) - ‘terraform_0.11.13_linux_amd64.zip’ saved [21128942/21128942]解压缩 ...

前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。IE9以及低于IE9版本 :可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。<!–[if IE]> <link rel=“stylesheet” type=“text/css” href=“all-ie-only.css” /><![endif]–>但是如果是IE10以上时，这个办法就不是很适用了。IE10或IE11:使用媒体查询（-ms-high-contrast）来加载样式表。由于-ms-high-contrast是微软特有的(并且只在IE 10+中可用)，所以只能在Internet Explorer 10或更高版本中解析。@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here /}微软 Edge12 :可以使用@supports@supports的参考文章@supports (-ms-accelerator:true) { / IE Edge 12+ CSS styles go here */ }总结如果我们想只针对IE加载样式表，只需要设置条件注释和-ms-high-contrast媒体查询即可。

博客地址Preface平时会用 vue 写新项目，老项目就在原有基础上更新。对于 vue 这种框架，使用官方的脚手架通常就避免了很多问题，就像平时用模板创建新的单页一样。然而有时总是会遇到些不按模板走的代码，虽然跑起来也没有问题，但是放到有些浏览器上就有 bug 了，这个时候对既有模板的理解和掌握就很重要了。Main当我用 html 模板创建一个新单页时，拿到的页面是这样的，vue 也是类似，至少三个 meta 标签基本都是一样的：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title></head><body></body></html>viewport 是在兼容移动端时才了解的内容，费了不少功夫。而 X-UA-Compatible 则是在遇到非常规代码的时候才想起来的。有一回改个老项目，用了 transform，在 ie11 上测试，没有用，而且在它的工具栏里样式表里根本看不到我写的代码，这个时候我就好奇了，这是 ie11 啊，怎么会不支持 transform 呢？然后我瞄了一下开发者工具，大概是这样的：然后我就好奇了，为什么会是 ie7 模式呢？我明明装的是 ie11 浏览器啊，然后脑袋一闪，好像明白了什么，看了看 html ，果然没有: <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>加上之后，再刷新，网页就正常了。在这件事之前，我知道这个东西，但是因为是用的模板，一直没有遇到过这个问题，而且通常来说，我会以为，我既然是在 ie11 里打开的，默认你也没有理由用 ie11- 的文档模式去渲染啊，结果就错了。后来看到 SO 上高票答主大概是这么解释 ie 的行为的：ie 会用它认为最好的方式去渲染页面，如果没有上面那行代码的话此外，ie11 已经开始废弃上面那个了，如果不兼容 ie 的话，其实上面的代码也可以不用写了，不过目前为止 html 模板和 vue 的模板都还是默认支持的。而上面的那行代码实际意思呢，就是：Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。对于 IE8，始终保持以 IE8 标准模式渲染页面。对于 IE9，则以 IE9 标准模式渲染页面。当然 ie 还可以等于其他值，不过其他值大多都是老版本，目前而言，都没有必要去纠结了，譬如：“IE=edge"“IE=11"“IE=EmulateIE11"“IE=10"“IE=EmulateIE10"“IE=9"“IE=EmulateIE9…EndingReferenceWhat does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do? ...