ie8 升级页面html,一个需要兼容到IE8的项目

从未兼容过IE8的girl，在看到自己满心欢喜写的页面在IE8里打开的时候，是崩溃的。

兼容的过程经历下来有一种洗心革面、破茧成蝶的感觉(尴尬而不失礼貌的微笑脸)。

1.html中的注释怎么判断IE8/非IE8

lang="zh-cmn-Hans">

如上，[if lt IE 8]的意思是：小于或等于。[if (gt IE 8)|!(IE)]的意思是：大于(切不包含)IE8，或，非IE8。至于lte、gt都是什么意思呢？

gt: greater than，选择条件版本以上版本，不包含条件版本

lt: less than，选择条件版本以下版本，不包含条件版本

gte : greater than or equal，选择条件版本以上版本，包含条件版本

lte : less than or equal，选择条件版本以下版本，包含条件版本

! : 选择条件版本以外所有版本，无论高低

&：并

|：或

()：子表达式

在这里留个问题给今后的自己(偏偏在问了俊哥的时候豁然开朗)：

为什么有些注释是这种写法

something doesn't show in ie

而有些确是

2. 一个关于meta的故事

对于360浏览器来说，意味着在360浏览器中启用极速模式(页面默认用极速核)，取之的有IE兼容内核：和IE标准内核：

3. 学会观察控制台中的render

故事的起因是这样的：

前提：页面有一个每秒一次的定时器。

我呢用了一个外引得超细字体，发现这些字体每秒都会闪一下(文字粗细颜色深浅来回转换)。这个现象被文博一眼看透，他说“闪烁，说明浏览器每秒都在渲染这个区域，看下rendering吧...”

两步：

找到控制台中的Rendering

勾选上Paint flashing之类的

Rendering

Paint flashing

勾选上了paint flashing之后会发现，那个定时器造成了几乎整个页面的每秒渲染一次。这个时候那个神奇的要使用will-change的原理就浮出水面了。所以解决办法之一，就是在定时器作用的上加上will-change: transform

4. 不要高估IE8/9对伪元素的渲染能力

为什么这么说呢？

用伪元素span::before的transform:translateY()模拟数字滚轮(当然在IE8/9中，我乖乖地把transform改为了top)：

发现在IE11的模拟器下模拟IE8/9的时候，浏览器可以准时并精准地把某一时刻::before的top位置渲染出来。然而在真实的浏览器中，IE8卡！住！了！(IE9甚至渲染找不到top位置，一次都赋值不上！)就连强制执行$targetElem.offsetLeft以求强制render，也是没有任何效果的。

无奈之下，只能在IE8/9中放弃伪元素，直接把数字innerHTML到相应的span中。

所以结论是，如果想要页面兼容IE8/9并且带有动画的话，慎用伪元素的定位变化。

5. a标签中的rel="noopener noreferrer"

vscode中一些插件(如HTML Snippets)已经把a:blank的补全自动加上了该属性。

可以看下此文的解释：

当给a标签加上target="_blank"的时候，待跳转的页面是可以通过window.opener获取到当前页面的部分访问的。所以，新开的tab页也就能够再用window.opener.location跳转到其他(比如某个钓鱼的)网页，或者代表当前页面执行一些JS操作。而用户往往是信任从当前页跳转的新tab页的。

比如，用一个萌猫的图片吸引你分享到facebook，然而当你在分享前需要登录的时候，却是一个fake的facebook登录页。如果你分不清的话，就是会乖乖地输入你的账号和密码的。

那么解决方式呢。。。

就是在target="_blank"的a标签中加上rel="noopener"，鉴于FF是不认noopener的，所以还要为了FF加上noreferer，所以完整写来就是：rel="noopener noreferer"

举个例子实践一下：

new page a、page b。page a 中有一个target="_blank"的a标签，link到了page b，当点击链接打开新标签也就是page b的时候：

console in page b.png

试着在page b的console中输入window.opener.location，能够看到原页面page a的地址。然后，将window.opener.location设置为其他页面地址的时候，page a就乖乖跳转了：

page a的location发生了变化.png

在我们加上了noopener之后，新打开的page b中就无法访问到window.opener当中的属性了。

after set noopener.png

值得注意的是，用JS实现新建标签打开页面，也伴有同样的问题，所以我们不要直接用window.open('http://www.google.com')，而是要像这样：

var otherWindow = window.open();

otherWindow.opener = null;

otherWindow.location = url;

6. 渐变的文字

所有的IE都不支持文字的渐变

优雅降级的处理方式是：-webkit内核者，渐变；IE核，纯色。

文字的渐变实际上是依靠背景的渐变来实现的：

background-image: linear-gradient(to right,#ffd823 30%,#0f9);：给文字设置一个渐变的背景

-webkit-background-clip: text;：文字以外的部分都cut掉

-webkit-text-fill-color: transparent;：文字部分设置为透明，以此来把背景部分透露出来。

不难看出，基本原理还是靠操作背景。所以不仅是文字渐变，镂空的文字也可以通过background: whatever;再加上-webkit-text-fill-color: transparent;-webkit-background-clip: text;来实现。

有关knockout text的实现可参考css-tricks上的这篇。

7. 帧动画的实现

帧动画，也就是把动画分解，每一帧做成一张图片，再把所有帧图拼成一个长图。最后利用改变background-position来实现动画。

举例：

animation: lightning 2s steps(20) infinite;

在animation中写下自定义的动画名lightning之后，设置一个steps(20)(表示一共执行20步，每一步的时间被2s平均分配)就可以了。

@keyframes lightning {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -3350px;

}

}

ps: 开发一定要和动效师确认好每一帧的停留时间(一般来说是40ms)。