1.css hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
css hack的三种写法
- 属性前缀法(即类内部Hack)：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.box{
color:red;
_color: red; /*ie6*/
*color:red; /*ie6,7*/
color:red\9; /*ie/edge 6-8*/
}
- 选择器前缀法(即选择器Hack)
- E条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" >
<![endif]-->
2.浏览器的兼容思路
-
首先考虑这个问题要不要处理
- 产品的角度。要考虑产品的受众是哪些人和市场，这些受众多使用的浏览器是哪种，比例如何，是效果优先还是功能优先。
- 成本的角度。要从成本的角度考虑是都必要做兼容。
-
其次考虑要做到什么程度的兼容
就是考虑让那些浏览器做到支持哪些效果。
-
最后考虑该怎么去做
- 根据兼容需求选择技术框架/库（jquery等）
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS:目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则，PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS
- 条件注释、CSS Hack、js 能力检测做一些修补
3. 常见浏览器兼容写法
- 条件注释
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" >
<![endif]-->
记住单词名字就懂什么意思了
<!--[if lt IE 7]> lt：less than 小于
<!--[if gt IE 7]> gt：greater than 大于
<!--[if gte IE 7]> <!--[if lte IE 7]> e：equal 等于 就是大于等于 小于等于
- css前缀
.box{
color:red;
_color: red; /*ie6*/
*color:red; /*ie6,7*/
color:red\9; /*ie/edge 6-8*/
}
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
- 选择器前缀
@media screen and (-webkit-min-device-pixel-ratio:0){ /*为chrome单独设置样式的类实现案例*/
.closeImg{
right:300px;height:100px;
width:200px;
background-color:Olive;
}
}
- Modernizr工具
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
- 条件注释结合选择器
<!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]-->
4. 常见兼容相关术语名词
- 条件注释。条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
- ie hack。针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
- js 能力检测。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
- html5shiv.js。 用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
- respond.js。让IE6-8支持CSS3 Media Query。
- css reset。 是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
- normalize.css。保护有用的浏览器默认样式而不是完全去掉它们。为大部分HTML元素提供标准化样式。修复浏览器自身的bug并保证各浏览器的一致性。用一些小技巧优化CSS可用性。用注释和详细的文档来来解释代码。
- Modernizr。帮助探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
- postCSS。它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码.
5.查询属性兼容性的网站
caniuse网站 https://caniuse.com/
网友评论