css Hack

1.css hack的概念

 由于不同厂商的浏览器或浏览器的不同版本（如IE，firefox/Safari/Chrome等），对css的支持，解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时我们为了获取统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的css样式。

我们把针对不同的浏览器/不同版本写相应的css code的过程叫做css Hack

2.css  Hack的原理

由于不同浏览器和浏览器版本对css的支持及解析结果不一致，以及css优先级对浏览器展现效果影响，我们可以据此针对不同的浏览器情景来应用不同的css。

3.1.css Hack的分类

（1）.IE6能识别下划线“_”和"*"星号

（2）.IE7能识别星号"*",但不能识别下划线"_"

  (3).IE6~IE10都识别"\9"

  (4).firefox前述三个都不能识别。

3.2 选择器前缀法（即选择器Hack）

（1）IE6能识别*html .class{}

（2）IE7能识别*+html  .class{}或 *:first-child+html .class{}

3.3 IE条件注释法（即HTml头部引用if IE Hack）

（1）所以IE（注：IE10+已经不再支持条件注释）能识别<!--[if IE]>IE浏览器显示的内容<![endif]-->

（2）IE6及以下版本能识别<!--[if lt IE 6]>只在IE6-显示的内容<!endif-->

这类Hack不仅对css生效，对写再判断语句里面的所有代码都会生效

（3）实际项目中css Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

4.css Hack书写顺序

一般是将适用范围广，被识别能力强的css定义在前面

五.cssHack IE条件注释法

这种方式是IE浏览器专用的Hack方式，微软官方推荐使用的hack方式

5.1 只在IE生效

只在IE中生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->


只在IE6+生效
<!--[if gte IE 6]>
这段文字只在IE6以上浏览器显示
<![endif]-->

只在IE8不生效
<!--[if !IE 8]>
这段文字只在非IE浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![end]>

转载：https://segmentfault.com/a/1190000013954044