一个手机页面的输入框，安卓上没问题，苹果上看就出问题-CSDN论坛

一个手机页面的输入框，安卓上没问题，苹果上看就出问题

Web 开发 > HTML(CSS)

收藏回复

[问题点数：20分]

⋅一个手机页面的输入框，安卓上没问题，苹果上看就出问题 ⋅下拉菜单特效怎么做点击后改变箭头的方向 ⋅读取数据显示的问题，求大神指教 更多帖子 关注私信空间博客 kyou5478 等级 本版专家分：0 结帖率 79.07%

		.inputWrap{width:15rem;height:1.62rem;margin:0 auto;border:1px solid #fd817f;border-radius:8px;position:absolute;top:2rem;}

		.inputWrapdiv{background-size:0.7rem 0.7rem !important;height:0.77rem;color:#5a5657;float:left;font-size:0.73rem;box-sizing:border-box;text-align:right;top:-1.8rem;}

		.inputWrap>input{width:10rem;margin-left:1rem;height:1.4rem;margin-top:0.10rem;outline:none;border:0;float:left;font-size:0.53rem;color:#fd817f;}

            <div class="inputWrap">

            	<div class="inputWrapdiv"></div>

                <input type="text" placeholder="输入姓名查询座位">

                <div style="position:relative;left:2.4rem;top:0.5rem;" id="magnifying-glass"></div>

            </div>

安卓上看没问题，苹果上就出现底边线被输入框遮盖了
这是什么问题，输入框的高度已经设置的比外框要小了
求大神解答

2016-04-20 15:00:01

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅大牛请进！！！ 更多帖子 关注私信空间博客 道先生 等级 本版专家分：60: 高度不要设置height,，用padding:5px 0;类似的来撑开就行，看情况加上overflow: visible;he 和 outline: 0 auto;

2016-04-22 10:40:43

点赞只看TA 引用举报 #1得分 0

⋅如何计算这个月的用水读数 更多帖子 关注私信空间博客 风中的少年 等级 本版专家分：2740: 见意使用bootstrap中的样式。。。然后稍作些改动

2016-04-22 11:15:16

点赞只看TA 引用举报 #2得分 0

⋅CSDN下午挂了 ⋅帮助网友下载百度文库文档 ⋅如何禁止移动端手势缩放网页？ 更多帖子 关注私信空间博客 浪子回头8 等级 本版专家分：1448: input的高度太高了，调小即可，这个真没必要用bootstrap

2016-04-26 16:14:52

点赞只看TA 引用举报 #3得分 0

收起

收藏回复

kyou5478

等级：

关注私信 TA的帖子

js防止安卓手机软键盘弹出挤压页面导致变形的方法: h5防止安卓手机软键盘弹出挤压页面导致变形的方法先看看问题： 1.原来是这样的： 2.在苹果手机里面是正常的： 3.到了安卓就是这样： 4.原因就是在安卓中被软键盘顶上来了，而苹果的软键盘是覆盖的（分层...

Android安卓WebApp中全屏和普通模式下 webview中软键盘弹出挡住输入框 解决方案: （这里要吐槽下，人家IOS端，苹果系统都给直接封装好了，软键盘一起，输入框上移的那是相当到位，所有场景都很完美，不得不说安卓的路还是任重道远啊！）后来终于找到一篇文章，可以解决在全屏模式下遮挡...

关于微信手机端IOS系统中input输入框无法输入的问题: 关于微信手机端IOS系统中input输入框无法输入的问题

部分安卓手机点击输入框，输入法会将输入框遮住问题: 在写移动端页面时候在乐视手机测试时，点击输入框，输入框无法自动调整到可视区域，并且输入法挡住了输入框，在其他苹果和安卓手机上测试是可以自动移动到可视区域的上网找了一些方法： 1、scrollIntoView(true | ...

IOS微信浏览器点击input元素无反应以及输入框输入后页面不回弹的问题: 1.最近在开发微信公众号网页，发现在iOS中，input元素快速点击的时候无法获得焦点，双击或者触摸屏幕的时候才能获取焦点。安卓端没有问题。...然后我去ant-mobile github上看了下，发现了这个（参考h...

微信开发安卓虚拟键盘挡住输入框的问题: 这个页面刚好一屏幕大小，所以没有滚动条，因为“保存”键上面那个项目备注是需要用户去填写的，当他点击后就会出现虚拟键盘，但安卓手机弹出键盘会遮住这个输入框，以至于用户看不见了。苹果手机天然不会喔，苹果...

关于ios下输入框无法输入的问题: 我的安卓手机和在谷歌手机模拟器上都没出现这个问题，但是有同事告诉我他的苹果手机无法输入。我自己试了下他的手机果然点击输入框没有任何反应。我觉得可能是css的问题，于是在项目的全局css里寻找关于input框的...

input 输入框 光标错位问题、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题: 最近做了一个调查问卷系统，应用场景是在微信中使用，然后邂逅了这个万年难遇的BUG尝试了很多方法，写满盒子宽高+溢出隐藏均不好使，在网上搜索了好多解决方法BUT都不是这个的解决方案，最后无意中发下了一片文章写...

input输入框在手机中光标及字体不居中解决方法: 如何解决input输入框在ios中光标及字体不居中的问题；问题根本：不要使用line-height垂直居中。解决方法：可直接定义height，然后高度由上下padding值撑开。input { font-size: 1.6rem; height: 1.6rem; ...

微信小程序输入框属性 cursor-spacing 问题: 微信小程序给输入框提供了属性 cursor-spacing，用处是聚焦时光标离软键盘的距离，但是在安卓机子上会出现不太好使，比如，没有达到预期的设置值，还有滑动到底部，设置的值不起作用。解决方案因为 cursor-...

vue移动端项目在IOS上点击输入框失效，需要点击多次: 1. 近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，那么导致这个问题所在的原因是因为项目中...而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法如下： FastClick.pro...

H5 ios移动端，键盘收起以后页面不缩回: 输入框所在的元素用了position:fixed，安卓端一切正常，ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因：键盘事件触发，导致position:fixed失效。解决办法： $("input").on(&...

手机横屏下，输入框输入时被系统键盘遮挡处理方法: $('input').bind('click',function(e){ var $this = $(this); e.preventDefault(); setTimeout(function(){ $(window).scrollTop($this.offset().top - 10); },200) })

微信小程序iOS使用input输入时placeholder及输入内容消失或隐藏: 在微信小程序开发中遇到一个小bug，在页面有一个输入框，进入页面后点击input获取焦点调起键盘，这时候iPhone出现placeholder消失、输入框内没有光标，输入打字的时候也没有输入显示的内容，当隐藏键盘后，输入框内...

IOS点击输入框获取焦点，弹起键盘，页面被顶起，失去焦点后，键盘滑下，页面无法恢复的解决办法: kickBack () { setTimeout(() => { window.scrollTo(0, document.body.scrollTop + 1) document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1) }, 10) ...

解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、...: 在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下：有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。在 iOS 下使用第...

微信浏览器踩坑集锦: 最近发现自己的一个WebApp在微信下面出现一个坑爹的问题，所以想写一篇文章来总结一下自己在微信开发中所遇到的一些问题和解决办法，给自己和其它人提供参考。先说一下微信浏览器的情况，安卓端微信6.1版本以上...

Vue项目中使用input在IOS中没有光标: 之前一直没注意到此问题，在android中使用一切正常，最近在测试ios中获取焦点没有光标，而且输入有间断，输入一个词之后必须重新点击input一次才能输入，找了好久才想起在全局引入中有user-select：none样式，之前...

Unity IOS11 IOS12 InputFied无法弹出软键盘的解决办法: 为了验证IOS10可以弹出软键盘，没有改任何代码都没有改，只是运行到IOS10上测试，确实没问题。那么为什么会出现这个问题呢？如何解决这个问题呢？当然，这是Uinty的BUG。有人建议在xcode中添加一个接口，获取一下...

h5兼容安卓和iOS的键盘弹出影响布局的坑: 1、先看看正常页面长什么样子，号码是我乱输入的，大家不要乱打= =2、然后再看看输入号码后键盘把这个订单确认的框顶上去了，顶上去对大屏幕手机也没关系，就是对小屏幕手机会把订单确认订到被隐藏一些。点击键盘的...

苹果手机safairi不支持position：fixed: 我们在做移动web应用的时候，常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部。但在IOS的safari和webview中，对position:fixed的支持不是很好（在IOS5之前甚至还不支持position:fixed）...

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题: 关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，页面显示出问题了当然得解决，...

基于vue开发的移动端项目在ios,android两大平台上的兼容性问题: 自从H5开发大热大火之后，越来越多的应用都在使用H5技术来实现，不管是纯...然儿，世界上并没有完美无缺的技术，任何技术都存在一定的缺陷，H5技术的局限性在于它在iOS,android这两大平台上的兼容性问题，接下里，鄙...

在Android安卓手机多语言输入解决办法: 本文介绍了在Android安卓系统手机中实现中文、日语（日文）、韩语（韩文）等语言输入法的一键快速切换的方法。

解决ios键盘消失页面不回弹问题: ios的input输入框唤出键盘后，键盘消失页面却不回弹问题，安卓无此现象 vue写法解决方案： <mt-field label="姓名" placeholder="请输入姓名" v-model="username" class="br-bt i-label" @blur.native.capture...

小程序的input组件在绑定bindinput事件后输入中文问题触发过于频繁: 在input组件绑定bindinput事件后，苹果自带的输入法，用户输入中文的拼音时，每一个字母都触发了事件，而不是等中文字打出来后触发。比如：我在搜索框中想搜索“美食”，在字打完后自动触发搜索，不需要点击按钮。...

ios移动端软键盘收起后，页面内容不下滑: ios移动端输入内容，软键盘弹出，页面内容整体上移。但是键盘收起，页面内容不下滑。 安卓没问题。 ``` .chat_footer{ bottom:0; left:5%;right:5%;width:90%; position:...

移动端webApp兼容问题解决: 1. IOS移动端click事件300ms的延迟响应 ...2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上

隐藏的输入框调起软键盘问题--ios/安卓: 最近仿照我的上篇文章又新写了个验证码的小页面，有些微的不同输入身份证后四位，由于可能有X字母，所以隐藏input的type不能设置为number了，懒惰的我直接删掉了type属性（造坑开始）且因为上次研究时漏掉了一些...

关于H5移动端 ios端 input输入框失去焦点，页面视觉回弹，但是底部留白问题: 在移动端，当点击输入框时，弹出软键盘，页面被顶上去一截，当输入完毕失去焦点，软键盘关闭时ios上页面高度没恢复，安卓手机会自动恢复页面高度。解决方法：在输入框失去焦点后（关闭键盘）让页面滚一下非框架...

相关热词 c#编译器学习 c#和其他语言相比 c# 什么是管道 c# 在ui线程中运行 c# 动态增加枚举 c# panel边框 c#调用dll报错 c# 编写dll c# dll修复工具 c# timer 多线程