201906学习计划-css不兼容ie8汇总

一、如何模拟ie8浏览器

因为目前win10的系统没有办法下载安装ie8。

1. ie11浏览器仿真ie8

能测试大部分ie8不兼容的问题。但在实际开发过程中仿真ie8还是会有复现不出来的ie8不兼容问题。具体原因没有找到。

2. IETester

IETester能测试大部分问题，但是IETester的调试工具太落后且需要下载IETester客户端，开发者更愿意使用高版本的IE仿真到低版本测试。

3. 安装虚拟机测试ie8

• 虚拟机安装包地址：
  链接：https://pan.baidu.com/s/1U-23dSPD7YNvfLDVLNxDuA
  提取码：spck

• 系统盘安装包地址：（尽量使用这一个.iso文件，从其他地方下载试了2个都不能在虚拟机上安装好，ghost版本的也试了不行）
  链接：https://pan.baidu.com/s/1CegGe9DOJhe7DDChDVDOmQ
  提取码：iy7w

• 【安装win7系统教程】

二、浏览器内核

1. 概念

最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，负责对网页语法的解释并渲染（显示）网页。是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

2. 分类

（浏览器不同版本内核不同，许多是双核。带有IE内核的双核浏览器，通常Trident为兼容浏览模式，另一个为高速浏览模式。）
（1）Trident(IE内核)：IE6~10、360安全浏览器、360极速浏览器、傲游浏览器…（很多）
（2）Gecko(Firefox内核)：火狐浏览器
（3）Presto(Opera前内核) (已废弃)：Opera浏览器（早期版本）
（4）Webkit(Safari内核,Chrome内核原型)：Safari浏览器，Android 默认浏览器
（5）Blink（Google和Opera Software开发）：Chrome浏览器

参考文献：
【百度百科：浏览器内核】

三、ie8不兼容的常用css

Internet Explorer 8 完全符合CSS 2.1规范，并支持某些CSS 3的功能。

1.ie8不支持的常用css属性：

属性名称	代码	chrome	ie8
background-size	background-size:50px 50px;
linear-gradient	background: linear-gradient(#000, #EEE);		不显示背景色
radial-gradient	background: radial-gradient(#000, #EEE);		不显示背景色
border-image	border: 10px solid transparent;border-image:url(./images/border.png) 30 round;
border-radius	border-radius:15px
box-shadow	box-shadow: 10px 10px 5px #888;
outline-offset	outline:2px solid red;outline-offset:15px;
transition	.eg{transition:width 2s;} .eg:hover{ width:300px;}	有渐变过程	无渐变过程
opacity	opacity:0.2;
rgba()颜色	background:rgba(0,0,0,0.8);		不显示背景色

2.ie8不支持的css单位：

• deg - grad - rad - ms - s
• Hz - kHz - turn - gd - rem
• vw - vh - vm - ch

【解决rem不兼容的方法】：
在页面中引用rem.js文件。需要引用在页脚，也就是末尾，在所有css文件引用和DOM元素之后。
【rem.js文件地址】：
链接：https://pan.baidu.com/s/1gq-lCoImNhj1KnQh1qY3pw
提取码：gnl0

3.html5新标签不兼容ie8

需要用到条件注释和html5shiv脚本，git地址：https://github.com/aFarkas/html5shiv

<!--[if lt IE 8]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

4.媒体查询media不兼容ie8

需要用到条件注释和respond.min.js文件。

<!--[if lt IE 8]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]—>

参考文献：
【微软官网：CSS 兼容性和 Internet Explorer】
【ie8不兼容的css属性】
【解决IE8下opacity属性失效问题】
【IE8不支持的部分css3属性处理】

三、解决方法

1.引入.htc文件

htc文件地址：
链接：https://pan.baidu.com/s/1HS9lNpanYOrQVcW0HLDuoQ
提取码：08pf

属性	代码	.htc文件
background-size	background:#eee url(./images/back.jpg) no-repeat;background-size:50px 50px;behavior:url(./htc/backgroundsize.min.htc);	backgroundsize.min.htc
border-radius	border-radius:15px;behavior: url(./htc/PIE-1.0.0/PIE.htc);	PIE.htc
box-shadow	box-shadow: 10px 10px 5px #888; behavior: url(./htc/PIE-1.0.0/PIE.htc);	PIE.htc

2.css hack

【概念】：把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
【原理】：由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
【利弊】：使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。（个人认为，这要背的太多，而且ie8及以上不同版本符号还不同，不仅把css写复杂了，还要多写几行为兼容多个版本的ie，没有必要使用）
【表现形式】：属性前缀法、选择器前缀法以及IE条件注释法。

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

参考文献：
【IE8兼容性问题及解决方案】
【史上最全的CSS hack方式一览（解决IE6-IE11,Firefox/Safari/Opera/Chrome兼容问题）】