今天做移动端的页面时碰到一个稀奇的问题,那就是点击label无法选中与之相关的checkbox,下面是问题代码:

    <li class="list-item clearfix notify-toggle">
<label class="setting-title">新消息通知</label> <div class="toggle-box">
<input id="btn_setting_toggle" type="checkbox"> <label class="toggle-ui" for="btn_setting_toggle"></label>
</div>
</li>

此时出现的问题是,在ios4下不论何种浏览器都会出现点击label无法选中checkbox的情况,其他系统或手机都能正常。

最终解决:最后在万能的stackoverflow下找到了答案:HTML <label> command doesn't work in Iphone browser,其实就是添加一个空的click事件。改好的代码:

<label class="toggle-ui" for="btn_setting_toggle" onclick=""></label>//添加空的click事件

最大的感慨还是:你现在踩到的坑其实许多前辈已经踩过,所以要走的还有很多!

兼容性之IOS下label 无法点击的更多相关文章

  1. IOS下的 click 点击失效

    当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. demo: & ...

  2. ios下点击穿透focus获取问题

    在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...

  3. 网页在ios下点击无效的原因

    之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现  ios下  如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:p ...

  4. ios下,<input type="checkbox"> 点击时出现黑色块

    ios下,<input type="checkbox"> 点击时出现黑色块如下图 解决方法:

  5. 移动端踩坑之旅-ios下fixed、软键盘相关问题总结

    最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关 ...

  6. iOS下WebRTC音视频通话(二)-局域网内音视频通话

    这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API. 如果你下载并编译完成之后,会看到一个iOS 版的WebRTC Demo. ...

  7. 关于label的点击事件(原创)

    通常做网页时不会用radio和checkbox的原有样式,通常会进行样式美化,手机端我用的jqurey weui框架,他的原理是这样的: <label class="check_lab ...

  8. 记一次事件委托在 ios 下的兼容 bug

    项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...

  9. ios下fixed回复框bug的解决方案

    前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

随机推荐

  1. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

  2. C语言初学 转义字符举例

    #include<stdio.h> main() { printf("\101 \x42 C\n"); printf("I say:\"How ar ...

  3. IOS 客户端测试入门.pdf

    IOS 客户端测试入门  http://www.open-open.com/doc/view/42d1257bf67946f595e843bfdbdfeabf

  4. IOS 解析XML文档

    前段时间想找点事做,就是试着看能不能用豆瓣的API做点什么,于是就碰到了这个问题——XML解析. 老师还没讲,只能自己去查. XML文档解析主要有SAX和DOM两种模式,IOS上两种模式都可以用,这里 ...

  5. SMTP协议--在cmd下利用命令行发送邮件

    先简单介绍下smtp smtp使用命令和应答在客户与服务器之间传输报文.即客户发出一个命令,服务器返回一个应答.发送方与接收方进行一问一答的交互,由发送方控制这个对话. 在XP系统下点‘开始’-‘运行 ...

  6. cxSplitter.HotZone 怎么给分隔条增加值

    请使用它的类名指定HotZoneClassName . cxSplitter1.ResizeUpdate := True; cxSplitter1.HotZoneClassName := 'TcxMe ...

  7. Linux CentOS 7 YouCompleteMe相关配置。

    CentOS 6.5上面弄了2天,以失败告终!!!当作练手了.在网上看到一篇CentOS7.0上安装YouCompleteMe插件的文章,就重新在虚拟机上安装了一个CentOS7,按那个文章执行了一下 ...

  8. 深入super,看Python如何解决钻石继承难题

    1.   Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通方法和super方法 假设Base是基类 class Base(object): def __init_ ...

  9. day57:00:26:34

    今天开始用博客记录倒计时,也只是为了看看今天做了什么.这也是我第一用博客园记录考研生活了 倒计时57天,我在想每天花时间在这记录生活会不会浪费复习的时间,其实不会的了,不去看微博,少刷新闻....仔细 ...

  10. phpcms:五、网站首页(index.html)

    1.经典案例:图文列表:{pc:content  action="position" posid="2" order="listorder DESC& ...