刚更新的css hack技巧

一 一般Hack

1概念：

不同的浏览器对CSS的解析效果不同，为了达到相同的效果，就得根据不同浏览器写不同的css

2规则：

　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等　　

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等　　

HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><[endif]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

举个栗子：

background: #f00;   各浏览器都认识，主要给高级浏览器用

background: blue\; 网上说是给IE8的，不过经过测试，IE10、、8都认识他。

background:#F60\\;  这个东西是给IE8 玩

background: red\;  这个东西好玩了，所有的ie都认识他。

+background: yellow;   *或+ 留给了IE7、 这一点还是不错的

_background:black; _专门留给ie6

:root .test{background: blue\;} :root是给ie9的，网上流传了个版本是 :root #test { background:blue\;}，新版opera也认识，所以经过反复验证最终ie9特有的为:root 选择符 {属性\;}

浏览器内核	Trident	Trident	Trident	Trident	Trident	Trident	Gecko	Presto	WebKit
	IE6	IE7	IE8	IE9	IE10	IE11	FF	Opera	Sarari
*	T	T	F	F	F	F	F	F	F
_	T	F	F	F	F	F	F	F	F
！important	见下面详解	T	T	T	T	T	T	T	T
@cc_on（特性检测）激活条件编译	见下面详解	见下面详解	见下面详解	见下面详解	if(/*@cc_on!@*/false){ 　　　　　　document.documentElement.className+='ie10'; }	if (/*@cc_on!@*/true) {             document.documentElement.className += ' ie' + document.documentMode;         }	同IE11	同IE11	同IE11
\9	T	T	T	T	T	T	F	F	F
\0	F	F	T	T	T	T	F	T	F
\9\0				T，其余F

3标准盒模型：元素宽度=width+padding+border+margin

　　　　　IE: 元素宽度=width+margin(padding和border都包含在width中了)

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

<!--[if IE]><link href="ie_styles.css" rel="stylesheet" type="text/css" /><![endif]-->我们可以通过这种方法在<!--[if IE]><![endif]-->里面加上只想让IE解析的东西，比如css,js,HTML。，其他浏览器会把他们当成注释。

5多类选择符的写法：

#my.c1.c2 { color:red;}
.c1.c2 { color:red;}

以上代码在IE6中会被理解为

#my.c2 { color:red;}
.c2 { color:red;}

在开发中最好不用多类选择器这样组合，因为IE6会只会读最后一个。
6!important在ie6中

识别：

<style type="text/css">
.demo{ color:red !important; }
.demo { color:green; }
</style>
<div class="demo">www.jb51.net</div> 

不识别：

<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>

也就是说在在一个选择器中利用!important改变样式的优先级是没有用的，在不同选择器中又是可以的。

7关于ie8-9:请注意一些细小的差别：

background-color:red\;IE8和IE9都支持；
background-color:blue\\; 仅IE9支持；

background: red\; /*所有的 ie*/
:root .test{background: red\;} /*ie9*/

8@cc_on 语句的用法

/*@cc_on @*/
/*@
document.write("JScript version: " + @_jscript_version + ".");
document.write("
");
@if (@_win32)
document.write("Running on the 32-bit version of Windows.");
@elif (@_win16)
document.write("Running on the 16-bit version of Windows.");
@else
document.write("Running on a different operating system.");
@end
@*/

9火狐浏览器

@-moz-document url-prefix() { .selector { property: value; } }
上面是仅仅被Firefox浏览器识别的写法，具体如：

@-moz-document url-prefix() { .demo { color:lime; } }
支持Firefox的还有几种写法：

/* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者： @-moz-document url-prefix() { .selector { property: value; } } /* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }

10 Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

11 Opera浏览器

html:first-child>body Selector {property:value;} 或者： @media all and (min-width:0) { Selector {property: value;} } 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
上面则是Opera浏览器的Hack写法：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

二、完美主义写法
这种方法是追求完美主义的写法，主要是配合我们上一节所说的IE条件注释，全部采用选择器Hack的写法。这种写法分两步：

1、创建条件样式表，并在HTML中body里添加相应的class类名：

<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
2、接着创建对应的样式

.demo {color: blue;}/*现代浏览器*/ .non-ie .demo {color: red;}/*除IE外浏览器*/ .ie9 .demo {color: yellow;}/*IE9浏览器*/ .ie8 .demo{color: green;}/*IE8浏览器*/ .ie7 .demo {color: orange;}/*IE7浏览器*/ .ie6 .demo {color: lime;}/*IE6浏览器*/ @media all and (min-width: 0px){ .demo {color:black;} /* webkit and opera */ } @media screen and (-webkit-min-device-pixel-ratio:0){ .demo{color:#369;}/* webkit */ } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo{color:#cf6;}/* opera */ } @-moz-document url-prefix(){ .demo{color:#963;}/* firefox * / }