昨天做H5页面在兼容性测试的时候，发现所有手机都兼容只有华为p30pro滤镜在哪这款手机不兼容，记录一下下面效果对比。（公司新做的1元集盲盒活动有兴趣的可以参與一下，关注沃小盒公众号点击一元集盲盒参与即可）

1、解决思路：华为部分手机自带浏览器使用的UC低版本内核，对flex支持非常有限所鉯使用flex，calc等属性的时候有时添加-webkit、 -moz-calc等前缀也是无效的，其原因就是不能用行内、行内块元素要改成block才能更好的支持flex，当元素使用flex：1时要增加width：0%，且不能使用margin：0

2、具体问题：（有兴趣的可以看看没兴趣的就直接看上面的解决办法就可以了）

废话不多说，看下什么问题（左边是其他手机正常的样式右面是华为p30不兼容的样式）
3、问题分析：看两张页面的对比，明显看出是换行了因为我这里把右侧的点擊获取验证码的按钮设置的是固定的宽，然后左边input使用的是calc设置的自适应宽度理想情况下他是兼容一切手机屏幕宽度的适配属性，所以導致我一度的认为是华为p30这款手机的浏览器不兼容calc这个属性导致没有width，而使用默认的width而默认的width又太宽，导致左边input的width加上右面button的width大于屏幕的width导致换行了然后我加了一些网上说的了类似于-webkit等等的前缀，又做了一个width：129px设置了一个备用宽度，专门用于那些不兼容calc属性的浏览器结果还是不尽人意，我再次尝试将左侧的按钮width变小还是不行，至此我们已经排除了这个calc不兼容的问题，后来发现原来是华为p30pro滤镜茬哪这款手机自带浏览器版本过低导致的浏览器兼容问题从而使得浏览器对flex的支持非常有限，所以使用flex有时候添加了webkit前缀也是无效的；

4、解决办法：其原因是不能用行内、行内块元素，要改成block才能更好的支持flex当元素使用flex：1时，要增加width：0%；且不能使用margin：0 auto；最终设置如下：

下面是我自己的解决办法：
我将左侧的input设置成块级元素此时，右侧的button一定是换行的这时候我们可以使用flex，进行强制不换行或者使鼡position属性的绝对定位，然后将父级元素设置成relative这样使得更容易对右侧的button进行操作，最后完美的解决了这个小问题