h5开发解决华为自带低版本浏览器兼容的问题

先说明一下场景，要求做一个h5贷款的表单提交，既能在app内使用也app外面使用，app使用版本高，自然不用太多考虑兼容性问题，flex布局随意发挥，但在app外面使用的场景就复杂得多，市面上的主流机型huawei、vivo、oppo、ios、微信兼容各种浏览器，uc、qq等，鉴于我使用的是webpack编译工具，第一时间想到的是在webpack的load中配置postcss，autoprefixer，嗯，解决了大部分的样式兼容问题，从测试拿来huawei机型EVA-AL00测试一下就可以愉快的逗比了，uc浏览器没有问题，qq浏览器没有问题，微信没有问题，我去，华为的自带浏览器怎么有地方样式乱成一团，flex没有生效？不对全页面都是flex布局，部分生效了，居中有效果，但是乱了地方是怎么回事？几经周折，终于解决了，因为华为自带浏览器使用的UC低版本内核，对flex支持度非常有限，所以使用flex,有时候即使添加了-webkit前缀也是无效的；其原因是不能用行内、行内块元素，要改成block才能更好的支持flex，当元素使用flex:1时，要增加width:0%; 且不能使用margin:0 auto;最终设置如下：

input {

-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 0%;

}

                                                                                                              小记一下，成长一点