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. z-index在IE中的坑

    在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设置该元素在视觉渲染模型中的层叠顺序. z-in ...

  2. 手机文件夹的emulated什么意思

    词典翻译是仿真,就是自带的存储卡, 手机的储存方式有两种,一种是手机内存 ,一种是SD卡内存.

  3. SQL语句-create语句

    SQL语法基础 Create database语句 Create database语句是在MySQL实例上创建一个指定名称的数据 库,create schema语句的语义和create databas ...

  4. c# 事件路由器

    事件转发 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...

  5. 使用Filebeat和Logstash集中归档日志

    方 案 Filebeat->Logstash->Files Filebeat->Redis->Logstash->Files Nxlog(Rsyslog.Logstash ...

  6. 二叉查找树（Binary Sort Tree）(转)

    二叉查找树(Binary Sort Tree) 我们之前所学到的列表,栈等都是一种线性的数据结构,今天我们将学习计算机中经常用到的一种非线性的数据结构--树(Tree),由于其存储的所有元素之间具有明 ...

  7. Centos系统下硬盘扩容

    装好CentOS后,发现空间太小,怎样才能增加硬盘容量?那就是再建一个硬盘: 打开虚拟经济的设置添加硬盘 查看现有的磁盘空间 fdisk -l [root@localhost ~]# fdisk -l ...

  8. FTP配置之 chroot_list 用户切换文件夹

    FTP配置文件vsftpd.conf关于限制用户在默认目录的配置,涉及到三个字段:chroot_local_user,chroot_list_enable,chroot_list_file. 我们按顺 ...

  9. 【三思笔记】 全面学习Oracle分区表及分区索引

    [三思笔记]全面学习Oracle分区表及分区索引 2008-04-15 关于分区表和分区索引(About PartitionedTables and Indexes) 对于 10gR2 而言,基本上可 ...

  10. bzoj 4546: codechef XRQRS [可持久化Trie]

    4546: codechef XRQRS 可持久化Trie codechef上过了,bzoj上蜜汁re,看别人说要开5.2e5才行. #include <iostream> #includ ...