CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
浏览器兼容的思路
- 根据用户浏览器使用情况考虑要不要做
- 需要适配哪些浏览器以及相应的版本
- 不同浏览器上的显示效果不一样，做到哪种程度 //因为有些属性某些浏览器并不支持
- 选择需要的兼容工具
浏览器兼容的写法
CSS属性前缀法：
.container{
_color: red;/*IE6识别*/
*color: red;/*IE6,IE7识别*/
color: red\9;/*IE6-IE10识别*/
color: red\0;/*IE8-IE10识别*/
color: red\9\0;/*IE9,IE10识别*/
}
选择器前缀法：
*html{}/*只对IE6生效*/
*+html{}/*只对IE7生效*/
@media screen\9{...} //IE6-7生效
IE条件注释法（即HTML头部引用if IE）：
CSS3选择器结合JavaScript
irefox 浏览器css hack
@-moz-document url-prefix() {
.selector { property: value; }
}
支持所有Gecko内核的浏览器 (包括Firefox)
*>.selector { property: value; }
Webkit 内核浏览器 css hack
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector { property: value; }
}
Opera 浏览器css hack
html:first-child>b\ody Selector {property:value;}
@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }
Webkit 内核浏览器 css hack和Opera 浏览器css hack
@media all and (min-width:0px){ .font1 {color:red;} }
解释
条件注释
以小于符号+叹号+两个减号开始 两个减号大于符号结束构成(字符均为英文小写输入)，而注解注释内容放入其中。
它会根据浏览器的不同选择性地给<html>标记添加（或不添加）一个包含浏览器版本信息的class属性。
IE Hack
<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
JS 能力检测
浏览器提供商虽然在实现公共接口方面投入了很多精力，但结果仍然是每一种浏览器都有各自
的长处，也都有各自的缺点。即使是那些跨平台的浏览器，虽然从技术上看版本相同，也照
样存在不一致性问题。
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
能力检测的基本模式如下：
if(object.property) {
//存在该属性或方法，使用object.property
}
html5shiv.js
ie低版本不支持html5标签，可以引入一段脚本，在ie浏览器中创建html5的标签。
HTML5 Shiv是JavaScript的一种备选方案。该方案在Internet Explorer 9版本中优先启用HTML5元素样式，但不允许使用没有由JavaScript定义过的元素样式。
respond.js
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
就是说在IE6~8浏览器中兼容响应式布局。
css reset
所有的 HTML 标签在没有设置样式时均被浏览器默认的样式列表所装饰 （不同浏览器默认样式有所不同）。CSS 的样式重置就是清楚浏览器的默认样式 ，可以理解为对于全局的样式定义。
通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。
Normalize.css
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
Modernizr
Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
许多HTML5与CSS 3的功能已经在许多主流的浏览器中实现出来。Modernizr能够告诉开发者，浏览器是否已经实现他们想要的功能。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支持那些老旧的浏览器。
PostCSS
PostCSS 使用 JavaScript 代码来转换 CSS 中的样式。PostCSS 通过不同的插件来支持对 CSS 的不同处理。PostCSS 的插件可以完成各种不同的功能，如支持变量和混入，支持未来的 CSS 语法和添加浏览器特定前缀等。
属性兼容性
caniuse.com是一个工具性的网站，帮助人们了解各个浏览器以及它们的不同版本对HTML5、CSS3等高级特性的支持情况，帮助网站设计人员根据网站针对的用户有选择的使用web设计高级特性，提高用户体验。
网友评论