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. Visionpro学习笔记 ：QuickBuild-Based Application Run-Once Button

    1) Creating a Run-Once Button 通过JobManager调用VisionPro文件.所有的过程放到一个Try/Catch块中. Private Sub RunOnceBut ...

  2. 【转】Linux查找本机默认网关

    ip route show | grep 'default' | awk '{print $3}' #vim getgw.sh #!/bin/shdefault_gateway_ip=`ip rout ...

  3. final修饰符，多态，抽象类，接口

    1:final关键字(掌握)    (1)是最终的意思,可以修饰类,方法,变量.    (2)特点:        A:它修饰的类,不能被继承.        B:它修饰的方法,不能被重写.      ...

  4. ABP官方文档翻译 2.7 对象到对象的映射

    对象到对象的映射 介绍 IObjectMapper接口 AutoMapper集成 安装 创建映射 自动映射属性 自定义映射 MapTo扩展方法 单元测试 预定义映射 LocalizeableStrin ...

  5. springboot(二十)：使用spring-boot-admin对spring-boot服务进行监控

    上一篇文章<springboot(十九):使用Spring Boot Actuator监控应用>介绍了Spring Boot Actuator的使用,Spring Boot Actuato ...

  6. IntelliJ IDEA使用心得之基础篇

    今天和大家分享一个非常好用的Java开发工具-IntelliJ IDEA. 下载地址:https://www.jetbrains.com/idea/ 目录: 1)IntelliJ IDEA使用心得之基 ...

  7. 基本的socket编程的介绍

    网络IPC:套接字 用socket实现两个不同的主机之间的通信(涉及到一些基本的计算机网络知识  略过..) 服务器端: 1.socket函数:生成一个套接字 int socket(int domai ...

  8. iterator和for of 循环

    JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还可以组合使用它们, ...

  9. python语言基础汇总

    注释 代码中添加注释是一个良好的编程习惯,python语言的注释才用井号'#'作为注释开头的,可以是任意内容,解释器会忽略掉这部分内容.其他每一行都是语句,当语句以冒号':'结尾时,缩进的语句视为代码 ...

  10. pycharm导入模块的时候遇到的两个错误

    1.from 包 import AES import后面一定是一个空格!!!!! 2.包的导入 上面多了一层报错 错误的原因是最外层多了一个pythonProject目录.改成下面的ok. 原因大佬这 ...