CSS的多浏览器兼容如何做？

1、css初始化 2、浏览器私有属性 3、css hack语法 4、自动化插件

1、css初始化用这个github.com/necolas/nor…

2、

-   **-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); 

3、

<!--[if <keywords>? IE <version>?]>
    代码块，可以是html，css，js
<![endif]-->

<!--[if IE]>
    <p>你在非IE中将看不到我</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->

<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

4、github.com/postcss/aut…

配合webpack

1、先安装autoprefixer插件,

npm install --save-dev autoprefixer

2、使用 autoprefixer 添加厂商前缀。

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      // 选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};