第一次写博客~  大家悠着看，有则改之，无则加冕，对不对的给个回复，让我知道你的存在。

在做活动页的时候，经常会碰到一些需要弹出显示的输入框（情节前提：本人安卓机~），前天自己写的时候自己调试没问题后发给测试，直接与我对接的测试告诉我没问题了，让同事看下就可以上线了，幸福满满的我准备休息一会。

BUT！！！BUT！！！BUT！！！，五分钟后她告诉我说问题有好多，而且全部都在iOS端！作为一个爱国人士（其实是没钱~）我是从不用苹果的，然后就经过N多时间的调试，从网上百度了好多方法，一直到下班，总于找到一个可以的，人家下班走了怎么办？我只能找其他同事借了一个苹果4s~~（可能是他们楼层的测试机~真心破~），惊喜的发现，Oh, My God，老子做到了！ 又一次幸福满满的回家了。

第二天早上来了以后立马用同事的5s也测试下，没问题！发给测试看。然后。。。悲剧了！在6p上不行，万般无奈的我只有请公司的牛牛帮忙。

以上纯属废话~    爱看不看~~

绝对定位模拟固定定位~

原理：待会画张图吧，嘴说太麻烦~

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位替换固定定位</title>
<meta name="viewport" chang="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
;;}
html,body{
%; /* 必须要 */
%;/* 必须要 */
}
.dahezi{
%;/* 必须要 */
%;/* 必须要 */
overflow: hidden;/* 必须要 */
position: relative;/* 必须要 */
}
.chang_box{
%;/* 必须要 */
%;/* 必须要 */
overflow: scroll;/* 必须要 */
}
.chang{
px;
}
.fixed_box{
%;
px;
position: absolute;/* 必须要 */
px;
text-align: center;
px;
background: red;
color: #fff
}
.fixed_box2{
position: absolute;/* 必须要 */
%;
%;
rem;
rem;
background-color: #f12313;
}
</style>
</head>
<body>
<div class="dahezi">
<div class="chang_box">
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~1</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~2</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~3</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~4</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
</div>
<div class="fixed_box">
原本固定的盒子1
</div>
<div class="fixed_box2">
原本固定的盒子2
</div>
</div>
</body>
</html>

iOS 固定定位不兼容、input获取焦点后位置不对。的更多相关文章

  1. IOS 固定定位底部input输入框，获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  2. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  3. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  4. 移动端登录页面input获取焦点后页面布局及输入框上移的问题

    最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, ...

  5. 移动端 input 获取焦点后弹出带enter(类似于搜索，确定，前往)键盘，以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  6. CSS——相对定位、绝对定位、固定定位

    相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...

  7. (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

    完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...

  8. js实现导航固定定位

                                                                                   js实现导航固定定位 <!DOCTY ...

  9. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

随机推荐

  1. springboot 单体架构之shiro集成

    这里使用的是eclipse 开发工具 1.springboot 版本是2.0的,引入了2个shiro 的依赖,如下 <parent> <groupId>org.springfr ...

  2. 并发编程之 ThreadLocal 源码剖析

    前言 首先看看 JDK 文档的描述: 该类提供了线程局部 (thread-local) 变量.这些变量不同于它们的普通对应物,因为访问某个变量(通过其 get 或 set 方法)的每个线程都有自己的局 ...

  3. 在.net中序列化读写xml方法的总结--转载过来学习学习

    原文章地址:http://www.cnblogs.com/fish-li/archive/2013/05/05/3061816.html 首先做个大概的总结,XML包括的元素有XmlElement,X ...

  4. Spring Boot项目使用maven-assembly-plugin根据不同环境打包成tar.gz或者zip

    spring-boot-assembly 在spring boot项目中使用maven profiles和maven assembly插件根据不同环境打包成tar.gz或者zip 将spring bo ...

  5. Hibernate中的事务隔离问题（脏读、不可重复读、幻读）

    Hibernate中的事务隔离问题(脏读.不可重复读.幻读) 1.事务的特性 事务的四个特性: 1)原子性:事务是进行数据库操作的最小单位,所以组成事务的各种操作是不可分割的 2)一致性:组成事务的各 ...

  6. HDU1054(KB10-H 最小顶点覆盖)

    Strategic Game Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. H5自适应屏幕分辨率大小

    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...

  8. equals 与 == 的区别

    equals 是 用来比较二个对象内容是否相等. == 是用来比较二个对象的内存是否相等. public void testString(){ String s1="123"; S ...

  9. CSS应用的小问题总结

    1.两个元素换行书写时,在实际的布局中展示为两个元素之间多了一个区间(这个区间通常是因为代码在换行时,解析会自动默认为一个空格字符),所以在实际应用时,如果想要将两个元素完全无缝隙的放置在一起并排显示 ...

  10. css 解决图片下小空隙问题

    http://baijiahao.baidu.com/s?id=1581004863053583633&wfr=spider&for=pc 这篇讲的挺清楚,也有解决办法