常见的兼容处理范例
-
条件注释
条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供和隐藏代码。
<!--[if IE 6]>
<p>这句话仅在IE6浏览器显示</p>
<!endif-->
<!--[if !IE]><!-->
<script>所有浏览器都不显示这句话</script>
<!--endif-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<!endif-->
条件注释的页面可以在IE9上正常工作，无法在IE10正常工作因为IE10不再支持条件注释。
条件注释
| 项目 | 范例 | 说明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| \ | [if (IE 6)\(IE 7)] | IE6或者IE7 |
-
IE hack
不同的浏览器对CSS样式的解析不同，导致同一个页面的呈现效果存在差异，IE hack为能够解决不同浏览器的兼容性，针对不同浏览器编写不同的CSS，使页面呈现相同的页面的效果。
CSS hack大致有3种表现形式，CSS属性前缀法、选择器前缀法、IE条件注释法（HTML头部引用if IE）Hack。
- 属性前缀法（即类内部Hack）：例如IE6能识别下划线“”和星号“”,IE7能识别星号“”，但不能识别下划线“”,
IE6~IE10都认识“\9”,但Firefox前述三个都不能识别。
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 选择器前缀法
ie6：
选择器{_属性/**/:/**/值；}
选择器{_属性:值；}
*html 选择器{属性:值；}
ie7:
*+html 选择器{属性:值；}
*:first-child+html 选择器{属性:值；}
选择器{*属性:值；}
- 条件注释法
-
js 能力检测
js能力检测，是识别浏览器的能力，不是识别特定的浏览器。
基本模式如下：
if(object.propertyInQuestion){
}
例如：IE5之前的版本不支持document.getElementById()这个DOM方法。但可以使用document.all[]方法。于是可以：
function getElement(id){
if( document.getElementById){
return document.getElementById(id);
}else if (document.getAll){
return document.getAll[id];
}else{
throw new Erroor("No way to retrieve element !");
}
}
html5提出的新元素不被该工具通过document.createElement实现自定义标签，html5shiv.js让ie低版本等浏览器支持html5标签的解决方案。
respond.js为IE9以下浏览器（IE6-8）支持CSS3中屏幕自适应的js插件。是一个快速、轻量的polyfill。
早期的浏览器支持和解析CSS的样式不同，导致渲染页面时效果不同。CSS reset就是一个CSS文件，清除了浏览器默认的CSS样式，为浏览器配置适合设计的基础样式。
相比css reset，在保护浏览器默认的样式前提下进行部分样式重置。根据作者的描述：
1.Preserves useful defaults, unlike many CSS resets.
保护有用的浏览器默认样式而不是完全重置它们
- Normalizes styles for a wide range of elements.
为大部分HTML元素提供一般化的样式- Corrects bugs and common browser inconsistencies.
修复浏览器自身的bug并保证各浏览器的一致性- Improves usability with subtle improvements.
用一些小技巧优化CSS可用性- Explains what code does using detailed comments.
用注释和详细的文档来解释代码
-
Modernizr.js（推荐使用）
js文件,html5和css3能自动兼容低版本浏览器，Modernizr.js能使老版本的浏览器支持html5，并保证新浏览器渐进增强的用户体验。主要原理就是对浏览器进行“功能检测”，Modernizr.js该工具在html标签中追加一些类名。
<html class="js flexbox geolocation postmessage indexeddb history
websockets rgba hsla multiplebgs backgroundsize borderimage
borderradius boxshadow textshadow opacity cssanimations
csscolumns cssgradients cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent
video audio localstorage sessionstorage
applicationcache -webkit-">
从这些类名可知该浏览器支持哪些特性，不支持哪些（no前缀表示）。然后我们可以针对class，设置样式：
.no-csstransforms3d{
background:#000;
}
postCSS是一款依赖js插件对CSS进行处理的工具。将CSS转换成抽象语法树（AST），调用插件处理AST得到结果。postCSS一般不单独使用，与已有的构建工具进行集成如Webpack、Grunk和Gulp，然后选择满足功能需求的插件进行配置。通过postCSS可以对CSS进行不同的转换和处理，从而将繁杂的工作交由程序去处理。
/*利用伪类清除浮动*/
.clearfix:after{
content:' ';
display:block;
clear:both;
}
/*只针对ie6、7的清除浮动*/
.clearfix{
*zoom:1;
}
/*为元素添加高度*/
.target{
display:inline-block;
*display:inline;
*zoom:1;
}
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
/*针对不同版本的ie浏览器在头部导入样式，针对不同版本的浏览器编写样式*/
<!DOCTYPE html>
<!--[if IEMobile 7]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
