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随笔-Visionpro空间字符的含义

    在visionpro中名字空间是一个非常重要的概念.简单的说就是在图像中的一个特殊坐标系. 下面说下名字空间中一些固定的字符的特殊含义: 1)“.”=这个表示使用输入图像的当前名字空间.即cogima ...

  2. java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINF.classes.views.index_jsp 问题解决方法

    本人使用的是taglib作为模板页,然后碰到的这个问题,如果有类似的可以参考. <%@tag description="Overall Page template" page ...

  3. ABAP 程序中退出操作

    CHECK. 1)CHECK 后面要跟一个表达式,当表达式值为假(false)时,CHECK发生作用,退出循环(LOOP)或处理程序(Processing Block). 2)如果CHECK出现在循环 ...

  4. mongodb备份恢复,数据导入导出

    数据导出 mongoexport 假设库里有一张apachelog表,里面有2 条记录,我们要将它导出 /test/mongodb/bin/mongo use wxdata switched to d ...

  5. bzoj 3509: [CodeChef] COUNTARI] [分块 生成函数]

    3509: [CodeChef] COUNTARI 题意:统计满足\(i<j<k, 2*a[j] = a[i] + a[k]\)的个数 \(2*a[j]\)不太好处理,暴力fft不如直接暴 ...

  6. python 路飞模块一考核总结

    1. 分别解释"=","==","+="的含义(口述) =为赋值语句,把一个变量值赋予另一个值 == 为条件判断,判断两个值是否相等 += ...

  7. 关于Apache配置虚拟主机后在局域网中让其他电脑访问

    #-----------adxssp------------# NameVirtualHost *:80 <VirtualHost *:80> ServerName www.b.com D ...

  8. VS2015 (C/C++) 生成的程序,不能在server2008上运行

    项目本来是为Linux下运行做的,但是客户环境需要在windows下运行,幸好用的一些库是跨平台的. 于是用vs2015编译. 然后就发现在2008上却运行时库,装了2015的运行时库后, 在运行,就 ...

  9. java设计模式-----1、简单工厂模式

    简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例,简单来说 ...

  10. zip-gzip-bzip2_压缩文件

    问:为什么要压缩文件? 答:方便传输,因为压缩的文件容量会比较小        存储所使用的空间也会比较小 ---> 备份   Windows里的压缩软件:WinRAR.Zip.好压.2345 ...