华为自带浏览器绕坑大法！

本人前端菜鸟，最近在做移动端网页的时候，使用的是弹性盒布局，在其他浏览器上面都没有问题，但是就是在华为自带浏览器上弹性盒布局不管用，已经试过在前面加webkit，moz，ms前缀，结果都不行

不过现在解决了，希望可以帮到大家下边是我做的兼容code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>学习项目</title>
    <style type="text/css">
        .bangdan_top_filter {
             width: 100%;
             height: 54px;
             line-height: 54px;
             background-color: #fff;
             z-index: 8500;
             position: fixed;
             display: -webkit-box;
             display: -moz-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;
             -webkit-box-pack: justify;
             -moz-justify-content: space-between;
             -webkit-justify-content: space-between;
             justify-content: space-between;
             -webkit-box-align: center;
             -moz-align-items: center;
             -webkit-align-items: center;
             align-items: center;
             -webkit-box-direction: normal;
             -webkit-box-orient: horizontal;
             -moz-flex-direction: row;
             -webkit-flex-direction: row;
             flex-direction: row;
            }

.bangdan_top_filter .left_aside, .bangdan_top_filter .right_aside {
             padding: 0 18px;
             font-size: 16px;
             color: #333;
        }

.bangdan_top_filter .fee_check_con {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -moz-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-flex: 0;
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            flex-grow: 0;
            margin: 0 auto;
            text-align: center;
            line-height: 55px;
        }
        .bangdan_top_filter .fee_check {
            display: none;
            width: 144px;
            height: 29px;
            line-height: 29px;
            border-radius: 16px;
            border: 1px solid #eb6262;
            position: relative;
            color: #eb6262;
        }

.bangdan_top_filter .fee_check_con span {
            width: 75px;
            height: 29px;
            line-height: 29px;
            display: block;
            font-size: 16px;
            border: 1px solid transparent;
            border-radius: 16px;
            position: absolute;
            top: -1px;
        }

.bangdan_top_filter .check {
            background-color: #eb6262;
            color: #fff;
        }
        .bangdan_top_filter .pay {
            left: -2px;
        }
        .bangdan_top_filter .free {
            right: -2px;
        }

</style>
</head>
<body>

</body>
</html>

除了以上这个问题，华为自带浏览器还不支持fixed，border小于1px，时间戳转日期的格式等等等等，所以想要完全兼容各浏览器的同学，必须要解决华为的坑

华为自带浏览器绕坑大法！相关推荐

华为自带浏览器兼容性总结其一
由于华为自带浏览器使用精简版的uc内核,所以考虑出现显示异常问题时,当以最原始的样式格式书写为基准. .search-box input.search { width: 100%; width:-mo ...
记一次移动端兼容问题（已解决）（华为自带浏览器）
记一次移动端兼容问题(已解决)(华为自带浏览器) 参考文章: (1)记一次移动端兼容问题(已解决)(华为自带浏览器) (2)https://www.cnblogs.com/lee-xiumei/p/1 ...
华为自带浏览器无法使用
一.首先确认其他浏览器是否正常使用 1.Microsoft Edge 页面截图 2.谷歌页面截图问题所在:Microsoft Edge浏览器版本 111.0.1661.43 (正式版本64 位)兼容 ...
小米华为手机自带浏览器上传图片提示：没有应用可执行操作
当使用小米手机.华为手机自带浏览器上传图片时,会提示:没有应用可执行操作.最初以为是上传组件的问题,后来发现用原生的表单上传是没有问题的.通过对比发现是多了个accept属性. 代码如下: <i ...
h5开发解决华为自带低版本浏览器兼容的问题
先说明一下场景,要求做一个h5贷款的表单提交,既能在app内使用也app外面使用,app使用版本高,自然不用太多考虑兼容性问题,flex布局随意发挥,但在app外面使用的场景就复杂得多,市面上的主流机 ...
高德h5定位误差_#高德地图api移动端定位失败解决方案 #H5 原生Geollocation接口Chomre浏览器的坑...
侧重:本文探索了 http 协议下,pc + 移动端定位解决方案 IOS版本: ios14 原生Geolocation 接口: Document Show my location function g ...
华为手机自带浏览器不支持 ES6 语法
原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...
华为手机自带浏览器无法下载 iis 网站 apk 问题解决方案(和SSL有关)
公司 web 服务器上部署了一个下载 app 的网站,同时也是 asp.net mvc 开发的 api 服务端,好久之前就有用户反馈华为手机自带浏览器无法下载 apk,查了好久都没找到原因,今天终于把 ...
华为CloudIDE免费公测，带你出坑带你飞
你的代码仓库上线了吗?是不是有时候遇到这样的问题? 只想浏览一下代码,却发现线上浏览效果不佳,高亮显示什么的都没有.而在桌面端浏览要需要先同步代码,再用桌面端的IDE打开.尤其是使用git的时候,先要 ...

华为自带浏览器绕坑大法！

华为自带浏览器绕坑大法！相关推荐

最新文章

热门文章