欢迎访问晨星博客!

  • 当前位置: 首页 Web前端 正文

    移动端网页点击链接出现蓝色背景修复

    文章目录
    1. 问题描述
    2. 解决办法
    3. 使用方法

    大家都知道我近期在开发WP-pic图片主题的移动端,由于移动端网页是最近几年才火起来的,我呢开始开发WEB前端的时候还是2000年的时候,中间转行了几年,最近一年算是闲来无事,从新找回当年攻城狮的乐趣吧,有做起了开发WordPress主题的行当,由于我之前开发的主题涉及移动端很少,也没有对这一块做过过多的了解,这不今天终于把WP-pic的手机端的首页模板开发完成,在手机上测试发现了不少兼容性的问题,像我前两天发布的UC和QQ浏览器的扩展接口可以为我们的网页提供一些便于用户体验的功能。喜欢的朋友可以去学习一下。今天呢我们讨论下移动端在点击URL链接时出现背景色改怎么办?

    问题描述

    首先呢我用的是android的手机做的测试,安装的是UC浏览器,在网页制作OK之后进行真机测试时发现点击网页中的超链接时会出现一个蓝色的背景,部分手机是灰色的,还有一些手机是有一个2PX左右的带色边框,机型我就不多说了,今天我们只要给大家枚举一个css属性来解决这个问题。

    当然大多说用户是遇不到的,因为如果不是自己开发的话,这些问题可能已经被原作者给优化了,当然也有一部分朋友用的模板不是太严谨可能存在这个问题,那么我们今天介绍的这个熟悉就可以大显身手了。

    解决办法

    这里呢我先把我们今天的主角请出来

    -webkit-tap-highlight-color

    啥?这是个什么东东,不要急我这里就给大家介绍一下。

    这个是webkit内核浏览器的一个css属性,如果你是一个资深的站长应该对浏览器的内核多少有些了解,当然这个不重要,重要的是我们可以用这个属性解决问题,这个才是关键。

    rgba(0,0,0,0)

    这又是一个啥东东呢?

    这个应该比-webkit-tap-highlight-color要好认一些,因为这就是一个透明的颜色代码。下面我们就要把这两个属性做下结合然后应用到我们的网页中,来处理我们遇到的问题了。

    使用方法

    1. *{
    2. -webkit-tap-highlight-color:rgba(0,0,0,0);
    3. }

    把这个代码放到我们的css样式表第一行即可,我在这里给大家脑补一下,省得大家不明白,在css的世界*号代表着全局,就是像我上面的写法就是网页中的每个元素都会应用这个属性,所以我们通过这个简单的代码即可去掉网页中所有链接点击时出现背景颜色块的问题了。

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 5 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. Q14781609448

      不错不错,一个下午在百度找这个解决方式,给出的结果我试过后都不行,来google找个这个文章分分钟就解决了我的问题。好棒!

    2. 九成

      博主 不错

    3. QQ爱好者

      初次来访,印象不错

    4. 好书推荐

      这个看起来蛮不错的

    5. boke112导航

      博主,你好,boke112导航特来拜会,发现贵站不错,已将贵站收录到博客导航的建站技术类,如有异议请留言哦!谢谢!PS:由于在贵站找不到留言板,所以在此留言告知,如造成困扰,请删除本评论,谢谢!

    账号登陆

    快捷登陆