关于弹性和布局在华为自带浏览器的兼容性问题

leileizhao1993 2016-12-08 07:55:16
本人前端菜鸟,最近在做移动端网页的时候,使用的是弹性盒布局,在其他浏览器上面都没有问题,但是就是在华为自带浏览器上弹性盒布局不管用,已经试过在前面加webkit,moz,ms前缀,结果都不行
...全文
2797 1 打赏 收藏 转发到动态 举报
写回复
用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>

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧