社区
HTML5
帖子详情
关于弹性和布局在华为自带浏览器的兼容性问题
leileizhao1993
2016-12-08 07:55:16
本人前端菜鸟,最近在做移动端网页的时候,使用的是弹性盒布局,在其他浏览器上面都没有问题,但是就是在华为自带浏览器上弹性盒布局不管用,已经试过在前面加webkit,moz,ms前缀,结果都不行
...全文
2797
1
打赏
收藏
关于弹性和布局在华为自带浏览器的兼容性问题
本人前端菜鸟,最近在做移动端网页的时候,使用的是弹性盒布局,在其他浏览器上面都没有问题,但是就是在华为自带浏览器上弹性盒布局不管用,已经试过在前面加webkit,moz,ms前缀,结果都不行
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
1 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
锻炼灵魂
2017-02-16
打赏
举报
回复
楼主说的问题,我之前也遇到过,不过现在解决了,希望可以帮到你 下边是 我做的兼容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> <div id="bangdanTopFilter" class="bangdan_top_filter"> <div class="left_aside" id="sort">分类</div> <div class="fee_check_con"> <div class="fee_check" style="display: block;"> <span class="pay check">付费</span> <span class="free no_check">免费</span> </div> </div> <div class="right_aside" id="sortType">筛选</div> </div> </body> </html>
华为
自带
浏览器
绕坑大法!
本人前端菜鸟,最近在做移动端网页的时候,使用的是
弹性
盒
布局
,在其他
浏览器
上面都没有问题,但是就是在
华为
自带
浏览器
上
弹性
盒
布局
不管用,已经试过在前面加webkit,moz,ms前缀,结果都不行 不过现在解决了,希望可以帮到大家下边是 我做的兼容code: 学习项目 .bangdan_top_filter {
微信内置
浏览器
及
华为
小米QQ
浏览器
关于使用rem的
兼容性问题
解决
一、问题描述 在做移动端h5页面开发的时候,rem的使用简直是屏幕适配的利器,但是,它在也存在
兼容性问题
: 在微信内置
浏览器
及
华为
小米内置及QQ
浏览器
访问rem做的h5的时候,由于设置部分字体过小,以上
浏览器
为了满足浏览需要,强制限制了html最小字体,虽然我们代码设置了html,body的字号,但并未生效,从而影响了页面
布局
! 二、rem的使用 之前我已经整理过了如何使用rem的方法,这里只是为了解决bug,就不展开说明了:附:如何使用rem适配移动端及移动端适配的其他方法汇总 三、解决方法 此版本
论flex
布局
和box
布局
的
华为
meta8手机
自带
浏览器
的兼容
2019独角兽企业重金招聘Python工程师标准>>> ...
【原】移动web资源整理(安卓、ios移动端
兼容性问题
归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <me...
前端
兼容性问题
记录
1、 ios8 h5 通信 不能传带有复杂链接符的字符串(json格式、&),可以用下划线 在移动端开发中,经常需要h5与APP进行交互。这时就需要前端和APP开发人员双方规定一种传输协议。在协议中可以添加与APP交互需要的参数。但是在IOS8系统中,不支持参数中有复杂链接符,比如JSON格式的字符串、&等等。目前为止,下划线...
HTML5
39,082
社区成员
5,547
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章