浏览器兼容css_CSS 样式浏览器前缀兼容性写法、生效写法

给各浏览器兼容css样式是最简单的方法就是在前方加上浏览器私有前缀，便于浏览器解析并根据各个的私有前缀来进行不停的属性渲染

-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */

-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */

-o- /* Opera浏览器(早期) */

-ms- /*IE浏览器 */

对于私有属性的顺序要注意，吧标准写法要写到最后面，兼容性写法放在前面

  // 兼容性写法
  -webkit-transform: rotate(-3deg); //谷歌
  -moz-transform: rotate(-3deg); //火狐
  -ms-transform: rotate(-3deg); //IE
  -o-transform: rotate(-3deg); //opera
  // 标准写法
  transform: rotate(-3deg);

这其中一般火狐浏览器的样式是最难调整的，如果上述方法无法在火狐浏览器上生效你可以试试下面这种方法

// 这种写法仅火狐识别
@-moz-document url-prefix() {
  .el-table {
    height: 78.4% !important;  // 通用写法里的优先级要大于此处 所以要加 !important
  }
}

下面是通用写法

  .el-table {
    height: 75.9%;
  }

附加一句：火狐的margin是算在width之内的。

还有一种自动管理浏览器前缀的插件Autoprefixer，可以解析css文件并且添加浏览器前缀到css内容里。可以去了解一下。