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(){}