mozilla开发社区上有 :active 不起作用的答案：

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function () { //...空函数即可 });

将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。

解决ios不支持按钮:active伪类的方法的更多相关文章

  1. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  2. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  3. 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  4. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  5. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  6. 微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

    在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input ...

  7. CSS3伪类使用方法实例

    有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...

  8. H5解决active伪类失效---点击后背景效果

    <body ontouchstart></body> 给body注册一个空事件即可

  9. 解决ios safari中按钮圆角问题【原创】

       问题描述 使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-rad ...

随机推荐

  1. Part 4：表单和类视图--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  2. Python之Django rest_Framework

    Django Rest Framework 一.rest api    a.api就是接口         如: - http://www.oldboyedu.com/get_user/       ...

  3. spring之p命名空间注入

    <bean id="personId" class="com.itheima.f_xml.c_p.Person" p:pname="禹太璞&qu ...

  4. PHP可以通过类名调用非静态方法

    今日有兄弟遇上一个问题,就是可以通过class名称直接调用该类中的函数,我测试了一下,确实可以,概念中是只有静态方法才可以这样调用的,现在 被刷新了,于是我在方法中加入一行$this相关的操作,再运行 ...

  5. PHP实现html字符实体转汉字

    就一个函数搞定了: mb_convert_encoding("人人", "UTF-8", "HTML-ENTITIES"); 这个函数原本是 ...

  6. MySQL系统临时表、用户临时表

    MySQL临时表分为系统使用的临时表和用户使用的临时表. 系统使用的临时表是指MySQL在执行某些SQL语句时需要依赖临时表来完成整个过程.系统使用的临时表的情况可以分为以下几种: *  group ...

  7. HDU 3595 GG and MM [Every-SG]

    传送门 题意: 两个数$x,y$,一个人的决策为让大数减去小数的任意倍数(结果不能为负),出现0的人胜 一堆这样的游戏同时玩 Every-SG 游戏规定,对于还没有结束的单一游戏,游戏者必须对该游戏进 ...

  8. BZOJ 1072: [SCOI2007]排列perm [DP 状压 排列组合]

    题意:给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0) 100%的数据满足:s的长度不超过10, 1<=d<=1000, 1<=T<=15 看到整 ...

  9. 【转】Android UI 五种布局

    在一个Android应用中,Layout是开发中的一个很重要环节,Layout是组成UI不可缺少的一部分. ## Android UI 核心类 在Android应用构建UI的方法有以下几种: 单纯使用 ...

  10. 【linux之设备，分区，文件系统】

    一.设备 IDE磁盘的设备文件采用/dev/hdx来命名,分区则采用/dev/hdxy来命名,其中x表示磁盘(a是第一块磁盘,b是第二块磁盘,以此类推), y代表分区的号码(由1开始,..3以此类推) ...