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. 完美解决打开github速度慢的问题

    摘抄自知乎. 修改hosts(HOSTS文件路径:C:\Windows\System32\drivers\etc\hosts) 1.打开Dns检测|Dns查询 - 站长工具 2.在检测输入栏中输入ht ...

  2. wampserver 的Apache启动错误提示：The requested URL / was not found on this server.

    打开localhost显示以下错误 原因:之前我配置了虚拟主机,所以服务器是从虚拟环境访问的,localhost也就访问不到 解决方法:打开httpd.conf配置文件,将Include conf/e ...

  3. IE各个版本的差异性

    1.IE6a.不支持png半透明图片,只能用filter实现b.不支持css的max-width.max-height.min-width.min-height其他不用说,一团糟,不过项目中还是得去兼 ...

  4. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

  5. Eclipse启动报错[ out of memory error has occurred ]或[ An internal error occurred while showing an internal error ]

    自我总结,有什么需要纠正或更好的方案,请告知,谢谢! 最近上来看到好多同学都遇到了这个问题,之前我也好几次碰到这个问题,很是恼火,什么没干,eclipse一开电脑就卡死了,后来发现不管是新打开ecli ...

  6. PHP定义字符串的四种方式

    1.简介 在PHP中这门语言中,因为是弱类型语言,因此使用变量时不需提前定义即可使用. 我们在使用php进行开发的时候,大多数使用双引号.单引号进行定义字符串.既然有这两种方式,那么他们之间肯定是有区 ...

  7. 移动端 滑动删除 swipeDelete

    功能比较简单常见,最近整理一下做备份记录.先看看线上 整体实际效果 下面是swipeDelete 用法 demo 默认参数 var defaults = { distance:80, //滑动距离 u ...

  8. 一个简单的node.js服务

    var http = require('http'); var qs = require('querystring'); var server = http.createServer(function ...

  9. Java版网络爬虫基础

    网络爬虫不仅仅可以爬取网站的网页,图片,甚至可以实现抢票功能,网上抢购,机票查询等.这几天看了点基础,记录下来. 网页的关系可以看做是一张很大的图,图的遍历可以分为深度优先和广度优先.网络爬虫采取的广 ...

  10. oneNote总结

    22.添加附加文件删除后,文件大小没有发生改变的(优化文件和清空回收站)