css兼容浏览器火狐

/* 举个例子： */
/* 兼容不同浏览器的CSS样式 */
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
box-shadow: 5px 5px 5px rgba(0,0,0,.5);

以上代码是兼容不同浏览器的CSS样式。其中，-webkit-是兼容Chrome和Safari浏览器的前缀；-moz-是兼容Firefox浏览器的前缀；最后的box-shadow则是通用属性，是所有浏览器都能支持的。

除了使用前缀之外，我们还可以使用浏览器的hack技巧来实现兼容。比如：

* 设置Chrome浏览器独有的样式 */
@media screen and (-webkit-min-device-pixel-ratio:0){
.box{display:flex;}
}
/* 设置Firefox浏览器独有的样式 */
@-moz-document url-prefix(){
.box{display:flex;}
}

.example {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
  width: 300px;
  padding: 10px;
  border: 1px solid #000;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {}

@-moz-document url-prefix(){}