参考
1.史上最全的CSS hack方式一览
2.前端的瑞士军刀：Modernizr.js
3.CSS hack-wikipedia
4.CSS hack-baidu
5.关于CSS Reset 那些事（一）之 历史演变与Normalize.css
一、什么是 CSS hack？
浏览器因类型、版本的不同，对CSS的支持程度、解析不一致。这导致了同样的CSS在不同浏览器下的页面效果不同。为了获得统一的页面效果，针对不同的浏览器或不同版本编写特定的CSS样式的过程，叫做CSS hack。
二、浏览器兼容的思路
- 是否需要
- 产品角度：产品受众及其使用浏览器比例，效果优先还是功能优先；
- 成本角度：有无必要。
- 兼容程度
- 最低兼容浏览器类型或版本，需要实现怎样的效果。
- 怎样实现
- 合适的技术框架或库；
- 明确要渐进增强还是优雅降级；
- 选择合适的兼容工具；(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- CSS hack（条件注释等）、js能力检测。
三、列举5种以上浏览器兼容的写法
- 条件注释（IE 9及以下）
- IE 6时，
<p>You are using Internet Explorer 6.</p>有效； - 除IE 9及以下版本之外的其他浏览器有效；
- IE 8时，载入ie8only.css。
- IE 6时，
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 属性前缀法
.box{
color: red;
color: yellow\9; /*ie 6~10*/
*color: pink; /*ie 6~7*/
-color: blue; /*ie 6*/
}
- 选择器前缀法
/*for Chrome/Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.hacktest {
background-color:gray;
}
}
- 利用js根据浏览器UA添加属性值
//js在html标签中嵌入用户浏览器的UA
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
/*将特定CSS匹配到所检测到的用户浏览器*/
html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}
- 利用工具如：Modernizr
应用modernizr.js后，运行时会生成当前浏览器支持和不支持的特性
<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">
然后我们可以针对支持与不支持分别编写样式，如box-shadow：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
四、以下工具/名词是做什么的
条件注释
条件注释只在IE中生效，是IE浏览器私有的代码，是一个类似if判断的语法注释块。IE Hack
就是针对低版本IE浏览器编写的只被其识别的样式等，以此保持页面效果与其他浏览器的一致性。js 能力检测
利用js来检测当前浏览器是否支持一些特性或方法。html5shiv.js
在IE9及以下的浏览器中生成可用的html5中的新标签。respond.js
是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。css reset
通过重新定义标签样式，将浏览器默认样式覆盖。normalize.css
保留有用的浏览器默认样式，为html元素的默认样式提供了跨浏览器的高度一致性；同时也修复了浏览器的一些bug。Modernizr
检测浏览器是否支持CSS或js的特性。如果支持，那么开发人员就可以充分利用这些特性做一些工作，反之，开发人员也好提供一个平稳退化的替代方案。postCSS
postCSS是一个js插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化CSS3的新特性语法、行内图片等。
