微信端页面使用-webkit-box和绝对定位时,元素上移的问题
-webkit-box 的用法
通常,在移动端要实现水平方向平分宽度的布局,会使用 -webkit-box 来布局。
它的使用方法是:
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
.parent {
display: -webkit-box;
}
.child {
-webkit-box-flex: 1;
width: 1px;
}
以上布局会使得三个.child元素平分.parent元素的宽度。
在.child元素内添加绝对定位的子元素
<div class='parent'>
<div class='child'>
<div class='ele'></div>
</div>
<div class='child'>
<div class='ele'></div>
</div>
<div class='child'>
<div class='ele'></div>
</div>
</div>
.parent {
display: -webkit-box;
margin-top: 100px;
background-color: #ddd;
}
.child {
position: relative;
-webkit-box-flex: 1;
width: 1px;
}
.ele {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: blue;
}
这种定位在chrome浏览器上是显示正常的,ele元素是在child元素的正中间。
但是,在微信端页面上,ele元素只是在child的水平方向居中,垂直方向上不居中,而是超出child元素,在child上方。
显示的效果是:
解决方法
要解决这个问题,只需要在child元素上添加一个固定的高度即可。代码如下:
.child {
position: relative;
-webkit-box-flex: 1;
width: 1px;
height: 500px;
}
显示的效果是:
原因分析
在浏览器中,绝对定位是脱离文档流的,所以ele元素不能撑起child元素的高度,导致child的高度是0,所以ele会顶到浏览器顶部。
给child元素设置高度后,ele的绝对定位就能通过child的高度来计算位置。
(完)
微信端页面使用-webkit-box和绝对定位时,元素上移的问题的更多相关文章
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- 安卓微信端打开H5页面背景图被键盘挤压移动位置解决
问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...
- 云瓣影音网站&&微信端(已开源)
随着该项目的发布到线上(小打小闹),即将又要开启另一段崭新的旅程.强迫自己停下来写写所学所得,个人认为总结和分享是一种很棒的学习方式.那让我们先来瞧瞧项目长的什么样.如果着急要源码的朋友,可以下拉到最 ...
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
- 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)
前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使 ...
- pc端页面在移动端显示问题
1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
随机推荐
- Laravel 8 图片上传七牛云
1.利用 composer 下载依赖包 composer require itbdw/laravel-storage-qiniu 2.打开 config 文件夹下的 app.php 文件,在 prov ...
- Laravel 报错: Dotenv values containing spaces must be surrounded by quotes.
报错信息如下: 原因: .env文件配置中欧冠包含空格的配置信息,用双引号""引起来即可
- CentOS 8 网卡命令使用
之前一直用CENTOS7中service来重启网卡,但是换成CENTOS8后centos8的网卡服务与centos7有所不同,无法通过systemctl或者service命令重启网卡.centos8网 ...
- NTFS权限概述
NTFS权限概述 NTFS是我常见的一种磁盘格式,在Windows系统中使用广泛,它打破了FAT的局限性.在我使用ntfs格式分区的时候经常会涉及到ntfs权限设置问题,来帮助我们对文件的处理.那么什 ...
- jsplumbWithVue实现流程编排
最近业务需求,通过拖拽,实现流程编排,包括编排元素中的各种属性,刚开始拿到这个需求,一头雾水啊,找度娘渡了好久,FQ翻了很久,各种博客CSDN搜索,最终技术选型还是定在了jsplumb,这要感谢@萌级 ...
- idea Mybatis mapper配置文件删除SQL语句背景色
原样式: 看着很不爽 本文 idea 版本为:idea 2020.3.1,以下操作均基于此版本进行 解决办法 1.去除警告 Settings>Editor>Inspections>S ...
- Linux常用性能诊断命令详解
top top命令动态地监视进程活动与系统负载等信息. 使用示例: top 效果如下图: 以上命令输出视图中分为两个区域,一个统计信息区,一个进程信息区. 统计信息区: 第一行信息依次为:系统时间.运 ...
- Java基础——StringBuilder的添加与反转方法
StringBuilder添加与反转方法 方法 返回对象 public StringBuilder append(任意类型) 添加任意参数数据,并返回对象本身,注意:返回的是对象本身,则调用过appe ...
- Linux指令入门-系统管理(云小宝码上送祝福,免费抽iphone13任务)
码上送祝福,带云小宝回家 做任务免费抽iphone13,还可得阿里云新春限量手办 日期:2021.12.27-2022.1.16 云小宝地址:https://developer.aliyun.com/ ...
- Linux移植到自己的开发板(四)问题汇总
@ 目录 1 使ubuntu支持两个版本的编译链: 2 版本问题: 3 ubuntu版本的vscode下载网速太慢: 4 ubuntu占用空间过大 5 执行make zImage 出错 lzop: n ...