兼容的相关知识点
2016-12-20 本文已影响0人
NathanYangcn
一、 CSS hack 是什么？
CSS hack 是处理兼容问题的一种方式，即针对不同的浏览器编写不同的代码，使不同浏览器最终显示效果统一化。
因为不同品牌、版本的浏览器，对代码的解析渲染的方式不同，所以会出现同一份代码在不同品牌、版本的浏览器下的显示效果得不到完全的统一：有些显示正常，有些则不正常。
为了解决这个问题，我们可以使用 CSS hack 或者 条件注释 的方式，针对特定浏览器编写不同的代码，以便使浏览器解析渲染的最终效果得到统一化。
CSS hack 有三种表现形式：CSS属性前缀法、选择器前缀法、IE条件注释法。
当然 CSS hack 并不是一种神奇的工具，并不能随时随地的使用得到统一的效果：前提是代码本身是正确的规范的，CSS hack仅是解决因浏览器的本身bug、技术支持力度、效果实现方式不同导致的最终效果的不统一的问题，CSS hack并不是因为修改你代码本身错误而存在的。
二、 处理浏览器兼容的思路和一些工具
处理浏览器兼容问题时，处于项目不同阶段，可选方式也不相同，我们从项目最初开始谈起
- 是否需要兼容——确定兼容范围
- 产品角度
首先，需要认知产品，清楚认识产品的核心功能和业务；哪些人群会使用这个产品；这些人群使用哪些浏览器进行访问以及使用占比情况；可大致判断需要兼容的范围；
其次，需要调查数据，确定目前主流浏览器的市场份额比例，结合上一条产品受众人群浏览器使用情况及所占比例，可最终确定需要的兼容范围。
最后，由此可确定基于哪种模式进行开发：1.优雅降级-优先保证显示效果；2.渐进增强-优先保证基本功能 - 成本角度
当然也需要考虑成本，尽量避免做些成本大作用小的事情（PS：优雅撕大法）
- 做到何种程度——确定兼容目标
- 兼容范围内外
我们要清楚自己是如何对待所有浏览器的，包括兼容范围内的兼容范围外的：
范围内：一般要求统一的页面，老老实实编写代码好了
范围外：完全抛弃不管？还是给个提醒？保证基本功能？自己决定好了！
- 采用何种方法——确定框架工具做法
- 框架
不同的框架所兼容的范围不一样，根据确定的兼容范围我们来选一个合适的框架吧，例如：
| 框架 | 兼容范围 |
|---|---|
| jQuery 1.x版本 | ≥IE6 |
| jQuery 2.x版本 | ≥IE9 |
| Bootstrap | ≥IE8 |
| Vue | ≥IE9 |
| 更多 | …… |
- 工具
还有一些工具能够协助我们处理因浏览器支持力度不够或实现方式不同而引起的兼容问题，例如：
| 名称 | 作用 |
|---|---|
| ◎html5shiv.js | 在不支持html5标准的浏览器上模拟使用html5新标签功能 |
| ◎respond.js | 在不支持CSS3标准的浏览器上模拟使用CSS3媒体查询功能 |
| ◎css reset | 消除浏览器的默认样式 |
| ◎normalize.css | 使不同的浏览器解析渲染的最终效果保持同一化 |
| ◎Modernizr | 检测浏览器对 CSS3 或 HTML5 功能支持情况的 JavaScript 库 |
| ◎postCSS | 使用 JS 插件来转换 CSS 的工具，可以作为预处理器，功能更为强大；例如为代码添加前兼容缀以便解决浏览器兼容问题 |
- 做法
最后还有一些具体做法，能够修补代码，去解决更为细节的兼容问题
| 名称 | 作用 |
|---|---|
| 条件注释 | 使IE能够读懂注释中的特殊命令，匹配相应的条件，执行对应的命令 |
| CSS hack | 利用浏览器的一些bug，触发浏览器相应的显示效果 |
| js 能力检测 | 识别浏览器的能力，检测浏览器支持哪些功能 |
三、 几个常见范例
- clearfix 清除浮动——IE6/7
清除浮动是这样的：
.clearfix:after {
content: " ";
display: block;
clear: box;
}
IE6/7中不支持这种写法，需要这样写：
.clearfix {
*zoom: 1; /*触发元素块级属性、仅对IE6/7有效*/
}
- inline-block——IE6/7
将一个块级元素变为行内块时，通常都是改变它的 display属性值，如下：
.box {display: inline-block; }
但在IE6/7中是不支持 inline-block 这个属性值的，我们需要这样写，如下：
.box {
*display: inline; /*触发元素行内属性*/
*zoom: 1; /*触发元素块级属性*/
}
- reset.css 重置边距
浏览器中对于每一个 html 标签都有自己的默认样式，有些时候并不需要这些样式，那么我们应该去掉它：
* {
margin: 0;
padding: 0;
}
- li:hover——IE6
IE6只能识别 a:hover，而对于 li:hover， div:hover 等都不识别，可以在其中嵌套一个 a:hover 以便达到 li:hover 可用的效果：
<ul>
<li><a href="#" style="display:block">栏目一</a></li>
<li><a href="#" style="display:block">栏目二</a></li>
</ul>
- min-width、min-height——IE6
IE6并不支持min-width和min-height，解决方法如下：
height:auto!important;
height:500px;
min-height:500px; /*IE6中的height属性本身就等同于min-height*/
----------------------------------或者第二种方法----------------------------------
min-height:200px;
_height:200px;
- 模拟 html5 标签、模拟 CSS3 媒体响应功能
某些老版本浏览器不支持这些最新标准，如果需要使用这些技术，就需要模拟它们方便我们使用：
<!--[if lt IE 9]> (这是条件注释，唯有IE能够识别)
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
(这句引用了一个js文件，模拟创造html5新标签，这样能够在不支持html5的浏览器上，使用html5新标签)
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
(这句引用了一个js文件，模拟创造CSS3媒体响应功能，这样能够在不支持CSS3的浏览器上，使用CSS3的媒体响应功能)
</script> <![endif]-->
