手机浏览器wap网页点击链接触发颜色区块的问题解决办法

引子

在做HTML5 WAP网页的时候,一行内容做了2个链接,点击一个标签的时候,整个块会闪一下,影响美观。需求针对这种情况来问我,能否把这个去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?

研究

通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:(0,0,0,0)。

下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个

-webkit-tap-highlight-color:(0,0,0,0)

的含义就是颜色是黑色,透明度是0,看不到了。所以点击就没有效果了。

-webkit-tap-highlight-color是什么?

注释:

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

语法:

-webkit-tap-highlight-color:color

默认值: inherit

适用于:链接元素比如新窗口打开,img元素比如保存图像等等

兼容性:

iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。

应用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>haorooms博客之 tap-highlight-color测试</title>
<meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
*{padding:0;margin:20px;color: #000;}
a{    
    text-decoration: none;
    padding: 12px;
    background-color:#39a6df;
    border-radius: 10px;
    display: block;
    text-align: center;
}
a:link,a:visited,a:hover,a:active{
    color:#fff;    
    text-decoration: none;
}
.no{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.hasRed{
    -webkit-tap-highlight-color:rgba(255,0,0,1);
}
</style>
</head>
<body>
    <p>默认<br><a href="javascript:void(0)">a标签</a></p>
    <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p>    
    <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p>
 
</body>
</html>

将上面代码贴到html中测试一下!可以用谷歌模拟调试。

另外还有一个设置选中文字颜色的方法。

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式:

::selection             { background:#FFF; color:#333; }
::-moz-selection    { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}

如果要去掉选中时的颜色,把background都置为none就行了。