只有华为p3030pro这款手机不兼容，效果对比

我昨天做了H5页面。在兼容性测试中，我发现所有电话都兼容。仅华为p30pro不兼容。记笔记并比较下面的结果。 （该公司新推出的1元设置盲盒活动，如果您有兴趣，可以参加，按照Wo Xiaobox的官方帐户，单击“一元设置盲盒”即可参加）

1、解决方案：一些华为手机在其浏览器中使用低级UC内核，但对flex的支持非常有限。因此，在使用flex，calc和其他属性时，有时会添加-webkit和-moz-calc之类的前缀。这也是无效的。原因是不能使用内联和内联块元素。需要更改它以阻止它以更好地支持flex。当元素使用flex：1时，增加width：0％，margin：0 auto不能使用；参考文章

2、具体问题：（如果您感兴趣，可以看看，如果您不感兴趣，请参阅上面的解决方案）

别胡说八道，让我们看看问题出在哪里（左侧是其他手机的常规样式，右侧是与华为p30不兼容的样式）

3、问题分析：查看两页的比较，很明显换行了，因为我将右侧的按钮设置为单击以将验证码设置为固定宽度，然后输入左侧使用calc设置的自适应宽度理想地与所有手机屏幕宽度自适应属性兼容，因此我曾经以为Huawei p30手机的浏览器与calc属性不兼容，导致没有宽度，并且默认使用宽度，并且默认宽度太宽，导致左输入的宽度加上右按钮的宽度大于屏幕的宽度，导致换行，然后添加了一些类似于-webkit的前缀等等，就像在Internet上提到的那样，然后再做一次。宽度：129px，设置了备用宽度，专门针对那些与calc属性不兼容的浏览器，结果仍然不尽人意，我再次尝试减小左侧按钮的宽度，但是到目前为止，它仍然无法正常工作，我们已经排除了这个calc不兼容问题，后来发现是由于华为p30pro手机的浏览器版本过低导致的浏览器兼容性问题，这使得该浏览器非常支持flex有限，因此使用了flex，有时还添加了webkit。前缀也无效;

4、解决方案：原因是无法使用嵌入式和嵌入式块元素。需要更改它以阻止它以更好地支持flex。当元素使用flex：1时，增加宽度：0％；并且不能使用margin：0 auto;最终设置如下：

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

以下是我自己的解决方案：

我将左侧的输入设置为块级元素。这时，必须将右侧的按钮换行。这时，我们可以使用flex强制非换行，或者使用position属性的绝对定位，然后将父级设置为level元素设置为相对，这样可以更轻松地操作右侧的按钮，最后完美解决了这个小问题。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-357806-1.html