[置顶] 华为自带浏览器绕坑大法!
2017-08-16 17:19
120 查看
本人前端菜鸟,最近在做移动端网页的时候,使用的是弹性盒布局,在其他浏览器上面都没有问题,但是就是在华为自带浏览器上弹性盒布局不管用,已经试过在前面加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>
<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>
除了以上这个问题,华为自带浏览器还不支持fixed,border小于1px,时间戳转日期的格式等等等等,所以想要完全兼容各浏览器的同学,必须要解决华为的坑
不过现在解决了,希望可以帮到大家下边是 我做的兼容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>
除了以上这个问题,华为自带浏览器还不支持fixed,border小于1px,时间戳转日期的格式等等等等,所以想要完全兼容各浏览器的同学,必须要解决华为的坑
相关文章推荐
- Vue打包后,华为自带浏览器无法访问首页
- sencha touch在华为emotion ui 2.0自带浏览器中圆角溢出的bug
- vue2.0 页面在华为自带浏览器里无法打开。
- 论flex布局和box布局的华为meta8手机自带浏览器的兼容
- sencha touch在华为emotion ui 2.0自带浏览器中圆角溢出的bug
- Android指定调用系统自带浏览器打开链接
- Android 自带浏览器谷歌账号自动登录的实现 -- 无法登陆原因分析
- 使用浏览器自带定位功能初始化百度地图
- iOS程序中调用系统自带应用(短信,邮件,浏览器,地图,AppStore,拨打电话)
- 自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]
- JavaScript 监控微信浏览器且自带返回按钮时间
- PHP限制页面只能在微信自带浏览器访问的代码
- [置顶] 2018华为校招机试题目
- Android调用系统自带浏览器打开网页的实现方法
- 把Eclipse自带的浏览器修改为自己习惯的浏览器
- [浏览器插件]经典书签同步工具xmarks与chrome自带同步功能比较
- android自带的浏览器如何下载apk包
- [置顶] 华为勇敢星实习生招聘面试经历和华为优招面试经历
- [置顶] django实现自带登录注册功能
- [置顶] 2017华为软件精英挑战赛小结