处理方法：
一、样式初始化
（学习视频推荐：css视频教程）
每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化
* { margin: 0; padding: 0; }
如果不知道该初始化什么，推荐一个初始化css样式库normalize.css，选取展示其中几个样式设置，如下：
html { line-height: 1.15; /* correct the line height in all browsers */ -webkit-text-size-adjust: 100%; /* prevent adjustments of font size after orientation changes in ios. */} body { margin: 0; } a { background-color: transparent; /* remove the gray background on active links in ie 10. */} img { border-style: none; /* remove the border on images inside links in ie 10. */}
二、添加浏览器私有属性
-moz- 代表firefox浏览器私有属性
-ms- 代表ie浏览器私有属性
-webkit- 代表chrome、safari私有属性
-o-代表opera私有属性
对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面
-webkit-transform:rotate(-3deg); /*为chrome/safari*/-moz-transform:rotate(-3deg); /*为firefox*/-ms-transform:rotate(-3deg); /*为ie*/-o-transform:rotate(-3deg); /*为opera*/transform:rotate(-3deg);
三、使用自动化插件
autoprefixer是一款自动管理浏览器前缀的插件，把autoprefixer添加到资源构建工具（例如grunt）后，可以完全忘记有关css前缀的东西，只需按照最新的w3c规范来正常书写css即可
//我们编写的代码 div { transform: rotate(30deg); } // 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置 div { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); }
webpack 中配置 postcss-loader 和 postcss-preset-env 也可以处理兼容问题
module: { rules: [{ test: /\.css$/, use: [ // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件 minicssextractplugin.loader, // 将 css 文件整合到 js 文件中 'css-loader', //修改 loader 配置 { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss 的插件 require('postcss-preset-env')() ] } } ] }]}// package.json"browserslist": { //开发环境配置 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], //生产环境配置 "production": [ ">0.2%", "not dead", "not op_mini all" ] }
相关推荐：css教程
以上就是css兼容性有哪些处理方式的详细内容。