给各浏览器兼容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内容里。可以去了解一下。