您的位置:首页 > 文旅 > 旅游 > 关于ios手机safari浏览器的bug

关于ios手机safari浏览器的bug

2024/12/23 9:47:24 来源:https://blog.csdn.net/kuang_nu/article/details/141174133  浏览:    关键词:关于ios手机safari浏览器的bug

问题:

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

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>

        <a>181xxxx234</a>

</em>

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

em a{

        color: #xxxx;

}

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com