文档结构

<div class="noteWrap">
<input type="text" placeholder="写留言" />
<img src="data:images/camera.png" />
</div>

设置样式:

.noteWrap{
height: 50px;
}
input{
line-height: 50px;
}

在ios上出现输入文字前光标占满输入框,输入文字后,光标不再占满输入框,而是底部和文字底部齐平。

原因:ios光标是和文字底部对齐的

解决方案:input去掉line-height,设置固定高度,父元素设置padding

.noteWrap{
height: 50px;
padding: 15px 5px;
}
input{
height: 20px;
}

也可以给input设置padding撑开

input光标错位的更多相关文章

  1. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

  2. IOS11下fixed中input光标错位问题

    项目遇到了这个问题,故作了个临时解决方案,暂时没有想到更好的方法,查阅了网上的方案,也没有找到完美的解决方案. 方案思路: ①弹窗打开时,阻止 body 滚动,禁用 touchmove ,同时记录当前 ...

  3. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  4. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  5. input长度随输入内容动态变化 input光标定位在最右侧

    <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this. ...

  6. input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...

  7. 隐藏input光标和输入内容方法

    text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标

  8. input光标大小

    最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font- ...

  9. Centos7 KDE 桌面Konsole 光标错位解决方法

    在使用linux 系统,桌面为KDE 时,在使用Konsole 时,光标的位置是错位的. 如下图效果  解决办法 用命令进入/home/cfox/.kde/share/apps/konsole 修改S ...

随机推荐

  1. CentOS7-Minimal安装MySQL服务

    CentOS7默认安装的是Mariadb而不是mysql,而Mariadb是mysql的一个分支, 安装mysql会覆盖Mariadb 一.下载MySQL官方的 Yum Repository [roo ...

  2. eclipse 克隆 https 地址的 Git 仓库报错:cannot open git-upload-pack

    解决方法:Window >Preferences >Team>Git>User settings点击Add Entry设置key:http.sslVerify value:fa ...

  3. [NOIP2019模拟赛]序列(Sequence)

    题目大意 有一个序列$A_i$ • 对于 i ≥ 1,如果有$ A_i > 0.A_{i+1}> 0$ 且存在 $A_{i+2}$,那么法老可以令$ Ai$ 和 $A_{i+1}$ 减一, ...

  4. Widget Factory

    Widget Factory 有N种零件,生产所需天数都为3~9天,有M条记录,记录开工星期几,和停工星期几,并告诉你这条记录所加工的零件,求每种零件的生产时间,\(1≤N,M≤300\). 解 显然 ...

  5. 制作FastDFS的RPM包

    首先获取fastdfs的源码,因为fastdfs还依赖一个libfastcommon的库,所以也要准备好. fastdfs的源码目录结构: libfastcommon的源码目录结构: 接下来将以Cen ...

  6. LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)

    LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)   关于LR如何监控Weblogic(JMX方式)的操作就不在这里多说了,帮助文件和网上的介绍已经非常多了,关键是对各操作步 ...

  7. CSS3 学习笔记(边框 背景 字体 图片 旋转等)

    边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...

  8. HTML值改变事件

    1.动态拼接html[表格中,如bootstrap grid] return '<input type="text" name="bjce" onchan ...

  9. SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包。

    SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包. 示例代码1:   #include <string> #include <iostream ...

  10. php中Sessions

    PHP Sessions  Session 中文译名叫做“会话”,其本来的含义是指有始有终的一系列动作/消息. PHP session 变量用于存储关于用户会话(session)的信息,或者更改用户会 ...