iOS下Fixed回复框Bug的解决方案
作者:网络转载 发布时间:[ 2016/2/22 14:10:39 ] 推荐标签:软件测试管理 缺陷管理
代码如下:
<style>
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
/* 元素内的滚动非常不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性,给main加上如下代码即可。 */
main {
/* main定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
</style>
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
可以参考我做的:DEMO
这里是用了absolute来代替fixed效果,这是一个我认为比较好的解决方法,只要看仔细一点没啥样式冲突问题。
· JS监控输入框到屏幕顶的高度
用js监控focus时的高度,然后控制变化,这个会出现回复框停留一段时间的问题。不建议用这种方法,具体代码网上有很多。
· iscroll.js
不在万不得已的情况下,我们尽量尝试一下不依赖第三方库的布局方案,注意别冲突掉样式和功能。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系SPASVO小编(021-61079698-8054),我们将立即处理,马上删除。
相关推荐
软件测试理论之缺陷管理Bug的生命周期的跟踪管理是怎么形成的?目前比较好用的缺陷管理工具都具备什么特点?缺陷等级的标准是如何判定的?有什么好用的缺陷管理工具吗?缺陷管理中缺陷的状态有哪些?如何进行状态管理?软件测试中的缺陷管理步骤和策略如何有效结合缺陷管理工具和缺陷管理流程?ALM(生命周期管理软件)之缺陷管理-缺陷流程处理ALM(生命周期管理软件)之缺陷管理-缺陷导出与修改ALM(生命周期管理软件)之缺陷管理-缺陷模版配置、导入缺陷ALM(生命周期管理软件)之缺陷管理-提交缺陷缺陷管理之Bug修复软件缺陷管理缺陷管理之测试新手缺陷管理项目实战缺陷管理工具:JIRA系统部署推进上线流程软件缺陷管理流程
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11热门文章
常见的移动App Bug??崩溃的测试用例设计如何用Jmeter做压力测试QC使用说明APP压力测试入门教程移动app测试中的主要问题jenkins+testng+ant+webdriver持续集成测试使用JMeter进行HTTP负载测试Selenium 2.0 WebDriver 使用指南