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. Struts2.3.34+Hibernate 4.x+Spring4.x 整合二部曲之上部曲

    1 导入jar包 可以复制jar包或maven导入,本文最后会给出github地址 2 导入log4j.properties文件 og4j.appender.stdout=org.apache.log ...

  2. shell获取字符串长度

    方法1: 使用wc -L命令 wc -L可以获取到当前行的长度,因此对于单独行的字符串可以用这个简单的方法获取,另外wc -l则是获取当前字符串内容的行数. 代码如下: echo "abc& ...

  3. bzoj2257: [Jsoi2009]瓶子和燃料

    2257: [Jsoi2009]瓶子和燃料 Time Limit: 10 Sec  Memory Limit: 128 MB Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了 ...

  4. Yii框架里用grid.CGridView调用pager扩展不显示最后一页按钮的解决

    有如下一例,调用zii.widgets.grid.CGridView显示Blog信息,代码如下: $this->widget('zii.widgets.grid.CGridView', arra ...

  5. Python数据结构之一——list（列表）

    Python版本:3.6.2  操作系统:Windows   作者:SmallWZQ Python包含6种常见的内建序列.它们分别是列表.元祖.字符串.Unicode字符串.buffer(memory ...

  6. shell脚本实现anisble客户端脚本分发和密钥授权配置

    ##############################Deploy ansible client shell######################## echo "start d ...

  7. crontab定时任务一定要记得做好备份

    今天咋服务器上敲了一个 crontab 命令(没加-e ,也没加-l, 更没加 -r) 但是竟然神奇的crontab全部被清除了. 心中一万只CN

  8. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  9. Shiro的原理及Web搭建

    shiro(java安全框架) 以下都是综合之前的人加上自己的一些小总结 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的A ...

  10. 插入排序实现&&选择排序实现

    萌新刚刚开始学习算法,第一步是学习排序,毕竟算法的四大块"排序,查找,图,字符串"里面,排序是第一位的(PS:今天才知道算法提供的只是一个程序编写思路,一直以为是一个函数,难怪传入 ...