关于ios手机safari浏览器的bug

问题:

我在一个<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>

<a>181xxxx234</a>

</em>

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

em a{

color: #xxxx;

}

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

相关推荐
程序猿看视界5 小时前
如何在 UniApp 中实现 iOS 版本更新检测
ios·uniapp·版本更新
dr李四维9 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
️ 邪神9 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱20 小时前
flutter项目苹果编译运行打包上线
flutter·ios
网络安全-老纪1 天前
iOS应用网络安全之HTTPS
web安全·ios·https
1024小神1 天前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
lzhdim1 天前
iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录
ios·iphone
安和昂1 天前
【iOS】知乎日报第四周总结
ios
hfxns_1 天前
iPhone12手机通话记录删除了怎么恢复?3个方法快速恢复
智能手机
麦田里的守望者江1 天前
KMP 中的 expect 和 actual 声明
android·ios·kotlin