关于ios手机safari浏览器的bug

fury_1232024-08-14 10:44

问题:

我在一个<em>181xxxx234</em>这是一个电话标签, 我在js代码中使用

javascript 复制代码

document.getElementById('callButton').addEventListener('click', function() {
    // 替换下面的电话号码为你想拨打的电话号码
    window.location.href = 'tel:+1234567890';
});

实现了点击这个标签调出手机的电话功能, 目前所有设备都是正常的.

我在这个元素中设置了css属性是蓝色的, 也就是这181xxxx234电话号码是蓝色的, 用户一看就是可以点击的, 我是给em加上了蓝色的color, 所有设备都是正常的, 只有ios的safari设备是不正常的, 蓝色没有显示, 显示的是黑色, 使用了所有的方法都加不上去这个蓝色,

当不知为什么的时候, 同时使用一根线 ,连接了手机和电脑, 使用电脑的safari进行调试, 调试后发现safari自动给你加上了一个a标签, 原因是safari浏览器看见你是一个tel的元素, 他就给你自动加上a标签, 导致em上的蓝色无法作用到内部新增的a标签中, 所以:

在safari中的形式:

<em>

</em>

多了一层a标签导致的, 我们多谢一段css:

em a{

color: #xxxx;

}

这样我们的元素就生效了, 成为蓝色了.