CSS hack

一、什么是CSS hack

由于市场上的各大浏览器厂商使用的浏览器内核不同，导致对于一些CSS样式有着不同的支持程度和解析方法。为了解决这些误差，采取不同的CSS样式设置来解决这些问题，让页面能同时减兼容不同的浏览器。这样就叫做CSS hack。

二、谈一谈浏览器兼容的思路

第一、清楚自己所写产品的受众是谁，他们使用各浏览器的比例是多少。
第二、兼容哪些浏览器，放弃哪些浏览器。
第三、在兼容性不同的浏览器上，哪些需要做到精美，哪些只需基本功能，考虑实现效果的成本和回报。
第四、根据兼容需求选择技术库和框架，根据兼容需求选择相应的兼容工具。
合适的框架：

1. Bootstrap (>=ie8)
2. jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
3. Vue (>= ie9)

三、列举5种以上浏览器兼容的写法

条件注释（IE10不支持条件注释）

 <!--[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]-->

项目  范例  说明
！   [if !IE]    非IE
lt  [if lt IE 5.5]  小于IE 5.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

属性选择器

.box{
  color: green; 
_color: red; /*ie6*/
 *color: yellow; /*ie67*/ 
  color: blue\9; /*ie/edge 6-8*/
}

选择器前缀

*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有效

使用Modernizr工具。

四、以下工具/名词是做什么的

1. 条件注释
   条件注释是IE5到IE9中HTML里一个特殊的解释语句。用于判断IE浏览器版本。且这些判断不是在脚本里执行的，而是直接在HTML代码中执行的。

• IE Hack
  针对不同版本浏览器，编写对应的CSS，让其能正常渲染页面。
• js 能力检测
  检测该浏览器是否支持某一特定能力。
• html5shiv.js
  用于解决IE9以下版本不能对HTML5新增标签进行支持，导致CSS无法作用。
• respond.js
  respond.js可以为IE6-IE8以及其他不支持CSS3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性，实现响应式布局。
• css reset
  将浏览器的默认样式全部重新定义。
• normalize.css
  normalize.css是一个可定制的CSS文件，它让不同的浏览器在渲染网页的时候更加统一。
• Modernizr
  Modernizer可以使得更加方便的为各种情况编写JS和CSS，无论浏览器是否支持。
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• postCSS
  它使用 JavaScript 代码来转换 CSS 中的样式。PostCSS 的插件可以完成各种不同的功能。

五、一般在哪个网站查询属性兼容性？

Caniuse