踩坑之IOS中input光标跑偏问题的解决方法

1.ios端兼容input光标高度处理

在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上
当点击输入的时候,光标的高度和父盒子的高度一样。造成的原因就是给父盒子添加了height和line-height
当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就
是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字
的底部)。
解决办法:去掉父盒子的高度height和行高line-height内容用padding撑开。

2.ios不支持potision:fixed

position:fixed改成absolute
然后jQuery阻止移动端遮罩层后页面滚动
css代码:

.ovfHiden{overflow: hidden;height: 100%;}

jquery:

 $(".header_right").click(function(){
    $('html,body').addClass('ovfHiden'); //使网页不可滚动
    $(".searchbox").show();
  })
  $(".yg-close").click(function(){
    $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
    $(".searchbox").hide();
  })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • 三点钟的下午 重又像孩子一样醒来 倾听闹钟指针走动的声音 那是一颗单调的心 街上传来叫卖的歌曲 这就已经是下午三点...
    诗人张毅伟阅读 226评论 0 8
  • 入夜 我想看看你 不知道 你的烦躁不安 依然固执 想融入你的世界 一句安慰语 不妄想你平复的静 你知道我这人 你面...
    迷失特寒阅读 201评论 0 0
  • Steve Shi 发表于知乎 对于爱情的解释,学术界最普遍的认识基本上就是Sternberg的三角理论了,这个理...
    我是钱非阅读 280评论 0 1