各瀏覽器的Hack寫法【轉】

Hack是針對不一樣的瀏覽器去寫不一樣的CSS樣式，從而讓各瀏覽器能達到一致的渲染效果，那麼針對不一樣的瀏覽器寫不一樣的CSS CODE的過程，就叫CSS HACK，同時也叫寫CSS Hack。而後將Hack放在瀏覽器特定的CSS文件中，讓其符合條件的瀏覽器解析這些代碼，就如前面所說的條件樣式，咱們將CSS Hack代碼放入條件樣式文件中，符合條件的瀏覽器就解析，不符合的將不解析，從面達到您所須要的頁面渲染效果。總的一句話來講使用CSS Hack將會使用你的CSS代碼部分失去做用，而後藉助條件樣式，使用其原CSS代碼在一些瀏覽器解析，而CSS Hack代碼在符合條件要求的瀏覽器中替代原CSS那部分代碼。常見的就是在IE6下使用，不具體說，我想你們都有碰到過了。下面咱們就一塊兒來看看全部瀏覽器都具備什麼Hack，換句話說，各類瀏覽器都能識別哪些CSS的寫法。

下面是我收集有關於各瀏覽器下Hack的寫法

一、Firefox

			@-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; }
		

二、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; }
			}
		

三、Opera瀏覽器

			html:first-child>b\ody 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; }
			}
			
		

四、IE9瀏覽器

			:root Selector {property: value\9;}
		

上面是IE9的寫法，具體應用以下：

			:root .demo {color: #ff0\9;}
		

五、IE9以及IE9如下版本

			Selector {property:value\9;}
		

這種寫法只有IE9以及IE9如下版本能識別，這裏須要注意此處「\9」只能是「\9」不能是別的，好比說「\8」，否則會失去效果的，如：

			.demo {background: lime\9;}
		

六、IE8瀏覽器

				Selector {property: value/;}
				或者：
				@media \0screen{
					Selector {property: value;}
				}
		

上面寫法只有IE能識別，如：

			.color {color: #fff/;}
			或者：
			@media \0screen{
				.color {color: #fff;}
			}
		

七、IE8以及IE8以上的版本

			Selector {property: value\0;}
		

這種寫法只有IE8以及IE8以上版本支持，如

			.demo {color: #ff0\0;}
		

八、IE7瀏覽器

			*+html Selector{property:value;}
			或
			*:first-child+html Selector {property:value;}
		

上面兩種是IE7瀏覽器下才能識別，如：

			*+html .demo {background: green;}
			或者：
			*:first-child+html .demo {background: green;}
		

九、IE7及IE7如下版本瀏覽器

			Selector {*property: value;}
		

上面的寫法在IE7以及其如下版本均可以識別，如：

			.demo {*background: red;}
		

十、IE6瀏覽器

			Selector {_property/**/:/**/value;}
			或者：
			Selector {_property: value;}
			或者：
			*html Selector {property: value;}
		

具體應用以下：

			.demo {_width/**/:/**/100px;}
			或者：
			.demo {_width: 100px;}
			或者：
			*html .demo {width: 100px;}
		

上面具體介紹了各類版本瀏覽器下如何識別各類的Hack寫法，包括了IE6-9以及現代版本的瀏覽器寫法。綜合上面的所述，咱們針對不一樣瀏覽器的Hack寫法主要分爲兩種從CSS選擇器和CSS屬性上來區別不一樣的Hack寫法。下面咱們分別來看這兩種的不一樣寫法：

CSS選擇器的Hack寫法

下面咱們主要來看CSS選擇器和CSS屬性選擇器在不一樣瀏覽器的支持狀況。下面先來看CSS選擇器支持狀況。

CSS選擇器的Hack寫法

一、IE6以及IE6如下版本瀏覽器

			* html .demo {color: green;}
		

二、僅僅IE7瀏覽器

			*:first-child+html .demo {color: green;}
		

三、除IE6以外的全部瀏覽器（IE7-9, Firefox,Safari,Opera）

			html>body .demo {color: green;}
		

四、IE8-9,Firefox,Safari,Opear

			html>/**/body .demo {color: green;}
		

五、IE9+

			:root .demo {color: red;}
		

六、Firefox瀏覽器

			@-moz-document url-prefix() {
			  .demo {
			     color: red;
			  }
			}
		

六、Webkit內核瀏覽器（Safari和Google Chrome）

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

七、Opera瀏覽器

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

八、iPhone / mobile webkit

			@media screen and (max-device-width: 480px) {
				.demo { color: red  }
			}
		

CSS屬性Hack寫法

一、IE6瀏覽器

			.demo {_color: red;}
		

二、IE6-7瀏覽器識別

			.demo {*color: red;}
		

三、全部瀏覽器除IE6瀏覽外

			.demo {color/**/:red;}
		

四、IE6-9瀏覽器

			.demo {color: red\9;}
		

五、IE7-8瀏覽器

			.demo {color/*\**/:red\9;}
		

上面羅列的都是各類瀏覽器下的有關於CSS的Hack的寫法，基中有針對於現代瀏覽器Safari,Google Chrome和Firefox的寫法，並且也有針對於咱們前端人員最討厭的IE6-9的各版本瀏覽器的Hack的寫法，並且這些Hack咱們又分爲CSS選擇器的Hack寫法和CSS屬性的Hack寫法。然而具體何種適用，你們能夠要據本身的需求來定，下面列出我我的的兩種寫法：

1、經濟實惠型定法：

這種寫法注重單獨的CSS的Hack寫法。不一樣的瀏覽器使用不一樣的Hack寫法，其實也只是以IE的Hack寫法比較多（由於咱們寫Hack也主要是針對IE的瀏覽器）特別是IE6下的瀏覽器。單獨爲各類瀏覽器寫Hack的好處是：針對各類瀏覽順的Hack寫法省力易記。由於其餘的瀏覽器主要是針對現代瀏覽器，相對來講是比較少的。針對於這種Hack的使用，我推薦使用下面的方法：

			.demo {
				color: red;/*全部現代瀏覽器*/
				color: green\9;/*全部IE瀏覽器*/
				color: lime\0;/*IE8-9瀏覽器*/
				*color: red;/*IE6-7瀏覽器*/
				+color: blue;/*IE7瀏覽器*/
				_color: orange;/*IE6瀏覽器*/
			}
			@media all and (min-width:0px){
				color: #000;/*Webkit和Opera瀏覽器*/
			}
			@media screen and (-webkit-min-device-pixel-ratio:0) {
				color: #f36;/*Webkit內核瀏覽器*/
			}
			@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
				head~body .demo {color: #369;} /*Opera*/
			}
			@-moz-document url-prefix(){ 
				.demo{color:#ccc;}/* all firefox */
			} 
		

2、完美主義寫法

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

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

			<!--[if IE6]--><body class="ie6"><<![endif]-->
			<!--[if IE7]--><body class="ie7"><![endif]-->
			<!--[if IE8]--><body class="ie8"><![endif]-->
			<!--[if IE9]--><body class="ie9"><![endif]-->
			<!--[if !IE]--><body class="non-ie"><![endif]-->
		

二、接着建立對應的樣式

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

上面就是目前各類瀏覽器下，相關CSS的Hack的寫法，下面咱們具體來看一個實例：

HTML Markup

			<div class="demo">test color</div>
		

CSS Code

			.demo {
				color: red;/*全部現代瀏覽器*/
				color: green\9;/*全部IE瀏覽器*/
				color: lime\0;/*IE8-9瀏覽器*/
				*color: red;/*IE6-7瀏覽器*/
				+color: blue;/*IE7瀏覽器*/
				_color: orange;/*IE6瀏覽器*/
			}
			:root .demo {color: #963\9;}
			@-moz-document url-prefix(){ 
				.demo{color:#897;}/* all firefox */
			} 
			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo { color: #000; }/*webkit*/
			}
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body  .demo { color: red; }/*opera*/
			}
		

請看最終效果圖：

請面羅列了各瀏覽器下的Hack的寫法，你們寫瀏覽的CSS Hack時也能夠參考下面的圖表

注：上圖要是看不清楚，能夠點擊鼠標右鍵，將圖片保存到本地後瀏覽，效果會更佳。上圖也能夠前往centricle.com在線查看。

那麼到此就介紹完了有關於各瀏覽器的CSS Hack的寫法，你們在平時須要使用Hack時能夠根據CSS的選擇器Hack和CSS的屬性Hack對號入坐，不過我仍是強調在Web頁面製做中儘可能不要使用CSS Hack來處理兼容問題。由於任何瀏覽器下出現渲染不一致都極有多是咱們本身的結構或樣式不符合W3C的某些要求，或者說違背了瀏覽器的某些規則而先形成的，因此咱們應該儘可能經過結構或CSS的修改來達到各瀏覽器渲染一致效果，除非到了萬不得已狀況下，才考慮CSS的Hack。