CSS兼容Chrome和Firefox

在做页面兼容Chrome和Firefox浏览器时，有时候会由于css样式导致两者显示不一致；
比如一个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;
   }
}

下面是Firefox版本的写法：

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

该方法在18年已经失效：@-moz-document url-prefix(){}