CSS兼容Chrome和Firefox

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dongyuxu342719/article/details/85318060

在做页面兼容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