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%;

}

小记一下，成长一点

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

低版本浏览器兼容处理
1.HTML5新标签对IE低版本浏览器的兼容处理问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法 ...
HTML data属性简介以及低版本浏览器兼容算法
实例使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
解决html5语意标签在IE低版本浏览器下的兼容问题：
方法一:手动改写. 1.在body中写入h5语意标签,这里用nav标签举例子:<nav></nav> 2.在js中手动创建h5的语意标签:document.createElem ...
java学习笔记——众筹项目练习——项目中的忘记密码（密码找回）与记住我（自动登录）功能和返回json数据低版本浏览器显示下载问题的解决、众筹系统架构重构
忘记密码(密码找回) 忘记密码(密码找回)这个功能可以说是目前所有为别人提供服务的软件系统都具备的基础功能啦!很普遍,因为总 ...
AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
解决MySQL Workbench导出低版本MySQL时报错Unknown table ‘column_statistics’ in information_schema的问题
解决MySQL Workbench导出低版本MySQL时报错Unknown table 'column_statistics' in information_schema的问题参考文章: (1)解决 ...
解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
vue3.0 + vite2.0+如何兼容低版本浏览器
这里写自定义目录标题一.问题二.解决三.解决方案四.打包预览一.问题在使用vue3.2和vite2 开发一个移动端或者钉钉端 H5 微服务 ios app内置浏览器打开没问题安卓 app ...

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

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

最新文章

热门文章