css兼容性有哪些处理方式

css兼容性处理方式有：1、对样式进行初始化；2、添加浏览器私有属性，如【-moz】代表firefox浏览器私有属性；3、使用自动化插件，如自动管理浏览器前缀的插件Autoprefixer。

处理方法：

一、样式初始化

（学习视频推荐：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兼容性有哪些处理方式的详细内容，更多内容请关注技术你好其它相关文章！