在做頁面相容Chrome和Firefox瀏覽器時，有時候會由於css樣式導致兩者顯示不一致，比如在Chrome上顯示正常，而在Firefox上可能就會出現縱向滾動條，這時候就要針對不同型別瀏覽器應用不同的css樣式了，下面是不同的瀏覽器CSS hank。

比如一個css樣式如下：

.consureBtn {
		width: 30px;
		height: 25px;
		background: #0188fb;
		border: none;
		color: white;
		margin-left: 0px;
		margin-top:10px;
	}

使用@media查詢可以針對不同的媒體型別定義不同的樣式，比如根據不同的螢幕尺寸設定不同的樣式。

下面是hank Chrome瀏覽器的寫法：

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.consureBtn {
		width: 30px;
		height: 25px;
		background: #0188fb;
		border: none;
		color: white;
		margin-left: 0px;
		margin-top:10px;
	}
}

下面是hank IE9+版本的寫法：

/*IE9+*/
@media all and (min-width:0) {
  .consureBtn {
		width: 30px;
		height: 25px;
		background: #0188fb;
		border: none;
		color: white;
		margin-left: 0px;
		margin-top:3px;
	}
}
 

下面是hank IE10+版本的寫法：

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.consureBtn {
		width: 30px;
		height: 25px;
		background: #0188fb;
		border: none;
		color: white;
		margin-left: 0px;
		margin-top:3px;
	}
}

用於定位Gecko（Mozilla Firefox）的 CSS hack是以@-moz-開頭的規則，這種規則不是標準規則，是Gecko引擎特定的規則。

/*Firefox*/
@-moz-document url-prefix() {
	.consureBtn {
		width: 30px;
		height: 25px;
		background: #0188fb;
		border: none;
		color: white;
		margin-left: 0px;
		margin-top:3px;
	}
}

比如相容Chrome和Firefox，在Firefox上可以看到只有@-moz-document url-prefix()的CSS規則是生效的：

參考文件：

https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do