CSS兼容、HACK 整理

整理：chemandy

1. IE条件注释

①制定一种特定IE浏览器(x=6\7\8\9)

<!-- [if IE X]>

<link rel="stylesheet" type="text/css" href="/css/ie.css" />

<![endif]-->

②指定一组IE浏览器，如IE5和IE5.5

<!-- [if lt IE 6]

<link rel="sytlesheet" type="text/css" href="/css/ie5x.css" />

<![endif]-->

③对IE隐藏样式

<!-- [if !IE]>-->

<link rel="stylesheet" type="text/css" herf="/css/advanced.css" />

<!--<![endif]-->

④对IE5.x隐藏样式

<!-- [if  gte IE 6]><!-->

<link rel="stylesheet" type="text/css" herf="/css/modern.css" />

<!--<![endif]-->

 

 

2. IE中的CSS HACK

①IE全系列，IE6+（IE6、7、8、9、10）：属性值后使用\9

②IE9+（IE9+高级特性）：选择器前添加使用 :root（这个会影响其他现代浏览器），并且在属性值后加上\0

③IE8\IE9+：属性值后使用\0

④IE6\IE7：属性名前使用*（推荐）或>或#

⑤过滤IE6：html>body selector{}

⑥IE6：星号hack，* html selector{}

⑦IE6：属性名前使用_（推荐）或-或+

⑧IE6：在同一代码块中，!important可以被覆盖。块外代码不能覆盖!improtant。

★灵活组合上述hack可以得到各个IE版本的专属CSS。

 

 

3. 其它hack 技术（不推荐）：

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

 

 

4. 浏览器似有属性扩展（还未承认但逐步实现的属性）：

☆IE(Trident)、Firefox(Gecko)、Safari(WebKit)、Konqueror(KHTML)、Chorme(WebKit)、Opera(Presto)

①-moz-支持：Firefox

②-webkit-支持：Chorme、Safari

③-khtml-支持：Konqueror

④-o-支持:Opera

5. 其他修复BUG方法：

①用JavaScript修复IE中的问题，JS链接：http://code.google.com/p/ie7-js/

 

 

扩展阅读

　　①简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

　　②IE9的css hack

　　③史上最全的css hack（ie6-9,firefox,chrome,opera,safari）