CSS中flex对部分IOS版本兼容性问题

众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！

大部分情况下可以通过一下兼容方法来写

div {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-direction: row;
  flex-direction: row;
}

注意：在小程序页面中父元素使用 display:flex 时，子元素使用 position:absolute 后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素 position:absolute 不生效页面出现布局混乱。所以当子元素要用 position:absolute ，尽量避免父元素使用 display: flex 布局。否则会出现兼容问题（开发工具测不出问题，只会在真机6s/6P/6sP才能测出问题）

若是以上问题还是没有解决，我们接着看。

查看是否是webpack等自动化构建工具打包的时候导致部分css丢失。可以通过查看打包后的文件查看css内容是否丢失。如果发现是webpack打包导致css部分内容丢失，可以试试下面的解决方法，可以通过以下方法解决

检查 build 目录下 utils.js 的 cssloader 是否有 minimize: true 选项
 

const cssLoader = {
  loader: 'css-loader',
  options: {
    sourceMap: options.sourceMap,
    minimize: true
  }
}

检查 webpack.prod.conf.js 是否有 OptimizeCSSPlugin 插件，然后注释掉

// new OptimizeCSSPlugin({
//   cssProcessorOptions: $sourceMap
//   ? { safe: true, map: { inline: false } }
//   : { safe: true }
// })

然后在根目录下寻找 .postcssrc.js 文件，把里面的内容更换为

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {
      browsers: [
        "last 10 versions",
        "ie >= 6",
        "ie_mob >= 6",
        "ff >= 10",
        "chrome >= 14",
        "safari >= 3",
        "ios >= 4",
        "android >= 4.0"
      ]
    }
  }
}

若有其他情况，望告知！