php 手机端样式兼容性,移动端UC浏览器a标签兼容性问题【原创】

摘要：a标签兼容性问题？看到这个标题一定很吃惊吧，准确的说是 a 标签加 >> 兼容性问题。目前在华为、vivo手机中会有这个问题，而且只在uc浏览器中会出现，苹果手机没有这个问题，但这不能说明安卓手机都有这个问题，因为测试了一台安卓索尼手机，也没有这个问题。

a标签兼容性问题？看到这个标题一定很吃惊吧，准确的说是 'a' 标签加 '>>'  兼容性问题。心月博主也是在前不久调试项目的时候发现的，项目在pc端、苹果手机上运行没有发现任何异常，但在华为手机的uc浏览器打开页面，却发现有两个a标签链接的的样式完全变了。

诡异的是，在某度搜了一圈也没看关于过这个问题的文章。

后来经过多次测试终于找到了这个诡异问题的根源。

原来UC浏览器给a标签里的内容加了一个 ucspan 标签，而且还给这个标签加了颜色样式。

相信对很多人来说，这是一个陌生的标签，而且在 W3C 标准中也没有这个标签，这对前端人员来说是一件非常恐怖的事，想想，你辛辛苦苦写的代码，结果你解析页面的时候把我写的标签完全给修改了，那这还是我写的代码吗？

下面心月博主就来说说这个诡异的问题是如何产生的：

当页面上有的'a' 标签内 出现了 '>>'(其它标签不会出现这个问题)，这个页面内最后一个满足这两个条件的a标签内的文本会被加上 ''，这个标签，并且页面内 其它 a 标签如果 href 值与这个标签一样，那么这个 a 标签内也会被加上 ucspan 标签和颜色属性，而这个改变是在页面加载完成后稍等一会才出现的，而且不管 这个 a 标签内的文本被什么标签包住，这个标签都会被替换成 ucspan。

但如果满足上面的两个条件，同时还满足下面的某一个条件，这个 a 标签就不会被加上 ucspan 标签：

1、'>>' 如果这两个转义实体中内部有空格，则不会被加上 ucspan；，同时会上一个有 '>>' 的 a 标签会出现上述兼容问题。

2、如果这个 a 标签的部分文本被标签包住，则这个 a 标签不会被兼容问题牵连，但其他满足条件的 a 标签还是会受到兼容问题的牵连。

3、如果这个 a 标签内出现单标签，则这个 a 标签也不会被牵连。

4、如果这个 a 标签的 href 值是 js 脚本，它也不会被兼容问题牵连。

除了上述4个方法，其实还有一种方法可以解决这个问题，那就是在页面加载完成后，通过执行一会定时任务，如果发现 ucspan ，就把 ucspan 替换回原来的标签。如果定时任务执行一会后没发现 ucspan，那就说明不会有这个兼容问题，可以结束定时任务了。

关于uc浏览器 a 标签的这个兼容问题就介绍到这了。

老实说，这个兼容问题很没道理，而且还有点作死的感觉。