剛更新的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\0; 網上說是給IE8的，不過通過測試，IE十、9、8都認識他。

background:#F60\0\9;  這個東西是給IE8 玩

background: red\9;  這個東西好玩了，全部的ie都認識他。

+background: yellow;   *或+ 留給了IE七、6 這一點仍是不錯的

_background:black; _專門留給ie6

 

:root .test{background: blue\9;} :root是給ie9的，網上流傳了個版本是 :root #test { background:blue\0;}，新版opera也認識，因此通過反覆驗證最終ie9特有的爲:root 選擇符 {屬性\9;}

 

 

瀏覽器內核	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\0;IE8和IE9都支持；
background-color:blue\9\0; 僅IE9支持；

background: red\9; /*全部的 ie*/
:root .test{background: red\9;} /*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; } }

2、完美主義寫法
這種方法是追求完美主義的寫法，主要是配合咱們上一節所說的IE條件註釋，所有采用選擇器Hack的寫法。這種寫法分兩步：

一、建立條件樣式表，並在HTML中body裏添加相應的class類名：

<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
二、接着建立對應的樣式

.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 * / }