一、什么是 CSS hack
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
CSS hack大致有3种表现形式，css属性前缀法、选择器前缀法以及IE条件注释法。实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
二、谈一谈浏览器兼容的思路
-
要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度（有无必要做某件事）
-
做到什么程度
- 让哪些浏览器支持哪些效果
-
如何做
- 根据兼容需求选择框架/库（jquery）
- 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css resect、normalize.css、Modemizr）
- postCSS
- 条件注释、CSS Hack、js能力检测做一些修补
-
渐进增强优雅降级
- 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级：一开始就构建完整功能，然后再针对低版本浏览器进行兼容。
三、列举5种以上浏览器兼容的写法
-
属性前缀法（即类内部Hack）：例如IE6能识别下划线“”和，IE7能识别，但不能识别下划线，IE6~IE10都识别“\9”，但firefox前述三个都不认识。
.box{ color:red; _color:blue;/*ie6*/ *color:pink;/*ie67*/ color:yellow\9;/*ie/edge 6-8*/ } -
IE条件注释法
<!--[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]-> -
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body {background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 -
条件注释和兼容工具结合
<<!--[if lt IE9]> <script src="../js/html5shiv.min.js"></script> <script src="../js/respond.min.js"></script> <![endif]--> -
使用Modernizr：利用Modernizr的能力检测，对标签不存在的能力特别优化，而不是利用if这种条件注释。
<html class="no-js no-textshadow"> <div class="box">hello</div> .box{ text-shadow:3px 3px 3px; }/*IE67下不支持*/ .no-textshadow .box{ border:1px solid red; }/*IE7下另外设定*/
四、以下工具/名词是做什么的
- 条件注释：条件注释可被用来向IE提供及隐藏代码。（IE 10不在支持条件注释）
- IE Hack：针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
- js 能力检测：检测当前浏览器是否支持某些特定的js样式。
- html5shiv.js：针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签，并使浏览器渲染该标签。
- respond.js：为不支持css3媒体查询的浏览器（IE678）模拟css3的媒体查询。
- css reset：清除浏览器默认样式。
- normalize.css：“css reset的替代品”，保护有用的浏览器默认样式；一般化的样式：为大部分HTML元素提供；修复浏览器自身的bug并保证各浏览器的一致性；用一些小技巧优化css可用性；用注释和详细的文档来解释代码。
- Modernizr：是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。
- postCSS：利用JS插件转换CSS。
五、一般在哪个网站查询属性兼容性？
- caniuse.com查css属性兼容
补充两个网站：
- browserhacks查hack的写法
- 浏览器市场份额
网友评论