从未兼容过IE8的girl，在看到自己满心欢喜写的页面在IE8里打开的时候，是崩溃的。
兼容的过程经历下来有一种洗心革面、破茧成蝶的感觉（尴尬而不失礼貌的微笑脸）。
1.html中的注释怎么判断IE8/非IE8
<!--[if lte IE 8 ]><html class="ie" lang="zh-cn"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="modern"
lang="zh-cmn-Hans">
<!--<![endif]-->
如上，[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，选择条件版本以下版本，包含条件版本
- ! : 选择条件版本以外所有版本，无论高低
- &：并
- |：或
- ()：子表达式
在这里留个问题给今后的自己（偏偏在问了俊哥的时候豁然开朗）：
为什么有些注释是这种写法
<!--[if (gt IE 8)|!(IE)]><!-->
something doesn't show in ie
<!--<![endif]-->
而有些确是
<!--[if lte IE 8 ]>
something you want to show in ie
<![endif]-->
2. 一个关于meta的故事
对于360浏览器来说，<meta name="renderer" content="webkit">意味着在360浏览器中启用极速模式（页面默认用极速核），取之的有IE兼容内核：<meta name="renderer" content="ie-comp">和IE标准内核：<meta name="renderer" content="ie-stand">
3. 学会观察控制台中的render
故事的起因是这样的：
前提：页面有一个每秒一次的定时器。
我呢用了一个外引得超细字体，发现这些字体每秒都会闪一下（文字粗细颜色深浅来回转换）。这个现象被文博一眼看透，他说“闪烁，说明浏览器每秒都在渲染这个区域，看下rendering吧...”
两步：
- 找到控制台中的Rendering
- 勾选上Paint flashing之类的
Rendering
Paint flashing
勾选上了paint flashing之后会发现，那个定时器造成了几乎整个页面的每秒渲染一次。这个时候那个神奇的要使用will-change的原理就浮出水面了。所以解决办法之一，就是在定时器作用的<span>上加上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）。
网友评论