CSS3之优秀的Hack

了解CSS Hack

1.什么是CSS Hack?
由于不同厂商的浏览器，比如Internet Explorer、Chrome、Mozilla Firefox、Safari等，或者是统一厂商的浏览器的不同版本，比如IE6和IE7，对CSS的解析和认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候，我们就需要针对不同的浏览器，去写不同CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中，也能得到我们想要的页面效果。

2. 为什么要用CSS Hack呢？
简单的说，CSS Hack的目的，就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS Hack为不同版本的浏览器定制编写不同的CSS效果。

3.原理：
由于不同的浏览器对CSS的支持和解析结果不一样，还由于CSS中的优先级关系，我们就可以根据这个来针对不同的浏览器来写不同的CSS。

常用的CSS hack方式

1. 方式一 条件注释法

• 条件：
  1、 gt ： greater than 只在大于指定版本的浏览中解析
  2、gte : greater than equal 大于等于
  3、lt： less than 小于
  4、lte: less than equal 小于等于
  5、! 除了条件版本以外的其他版本浏览器
  6、省略 只在IE浏览器下

例：

• 只在IE下生效

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

• 只在IE6下生效

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

• 只在IE6以上版本生效

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

• 只在IE8上不生效

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

• 非IE浏览器生效

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

2.方式二 属性前缀法
原理：属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
取值：

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高

例 ：

*background-color:green;
-background-color:green;

3.方式三 属性后缀法
取值：

\9：选择IE6+
\0：选择IE8+和Opera15以下的浏览器

例：

/* IE 8 9 10+ */
background-color: #000\0;
/* IE 9 10 */
background-color: #f0f\9\0;

ps:想要兼容IE6 7 8 9的时候，一定是高版本的兼容写法在前，低版本的在后。