手机端点解链接有外框的问题

Posted 2020-08-20 忘却的记忆

有的时候，用a作为链接的标签，但是有时在手机出现蓝色外框，很丑，考虑用别的标签代替a 处理此问题，另外所谓的outline:none是没用的

方案：

1：在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

<a href="#" onfocus="this.blur();">测试</a>
这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。

2：在a标签里嵌套其他标签，比如span 或者var等等，把内容放在被嵌套的标签里。这时候点击这个链接，聚焦的是a的子标签，自然不会聚焦在a标签上，所以也能避免这个问题。

3：不适用a标签做链接，采用其他标签，使用js做出hover的效果，在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对se友好性比前两种差很多。

这三种方法的共同点是比较麻烦，相比较而言，推荐第一种，第二第三也视不同的情况而定。也是会用到的。